时间戳

首页 > 解决方案 > 如何避免文字重叠？

html - 如何避免文字重叠？

问题描述

<div class="form-group row">
                        <label for="bahagian" class="col-sm-2 col-form-label; responsive" style="position: relative; left: 105px; font-size:1w">BAHAGIAN :</label>
                         <div class="col-sm-10" id="kod_bahagian">
                        <select name="kod_bahagian"  class="form-control">    
                            <option value="">-- SEMUA --</option>
                        @foreach ($bahagians as $bahagian)
                        <option value="{{$bahagian->kod_bahagian}}">
                            {{ $bahagian->bahagian }}</option>
                        @endforeach
                        </select>
                    </div>
            </div>

jsfiddle：https ://jsfiddle.net/qil12/sqyhfLmx/1/

我需要文本左侧和右侧框而不重叠。

标签： htmlcsslaravel

解决方案

只需删除position:relative;left:105px;. 相对于其原始位置，它从 left移动<label> 105px 。

#kod_bahagian{
    display: inline-block;
    margin-right: 10px;
}
<div class="form-group row">
    <label for="bahagian" class="col-sm-2 col-form-label; responsive" style="font-size:1w">BAHAGIAN :</label>
    <div class="col-sm-10" id="kod_bahagian">
        <select name="kod_bahagian"  class="form-control">    
            <option value="">-- SEMUA --</option>
        @foreach ($bahagians as $bahagian)
            <option value="{{$bahagian->kod_bahagian}}">
            {{ $bahagian->bahagian }}</option>
        @endforeach
        </select>
    </div>
</div>

推荐阅读