Question

＆＃13;

.selected_area {
  background-color: #c8c8c8;
  padding-top:5px;
  height: 330px;
  border-radius: 5px;
  width:233px;
}

＆＃13;

 <div class="selected_area">
              <label>
                <input type="checkbox" value="scooter" id=""><div class="label-text fa-lg"><span>ScooterScooterScooterScooterScooter ScooterScooterScooter cooterScooterScooterScooter ScooterScooterScooter</span></div>
              </label>
              <label>
                <input type="checkbox" value="motorcycle" id=""><div class="label-text fa-lg"><span>Motorcycle</span></div>
              </label>
              <label>
                <input type="checkbox" value="downtown 250 en" id=""><div class="label-text fa-lg"><span>DOWNTOWN 250(EN)DOWNTOWN 250(EN)DOWNTOWN 250(EN) DOWNTOWN 250(EN)DOWNTOWN 250(EN)</span></div>
              </label>
            </div>

＆＃13;

如何使我的文字旁边没有复选框？

Answer 1

为此你写CSS就像：

input[type="checkbox"] {
    display: inline-block;
    width: 15px;
    vertical-align: top;
}

.label-text {
  display: inline-block;
  width: 200px;
  word-break: break-all; 
}

另外，对于并排对齐，您应使用<span>代替<div>等块元素。

我已创建JSFiddle，请看一下。

Answer 2

试试这个

<div class="selected_area">
<label>
    <input type="checkbox" value="scooter" id="">
        <span class="label-text fa-lg">
            <span>ScooterScooterScooterScooterScooter ScooterScooterScooter cooterScooterScooterScooter ScooterScooterScooter</span>
        </span>
        <br>
        </label>
        <label>
            <input type="checkbox" value="motorcycle" id="">
            Motorcycle

                <br>
                </label>
                <label>
                    <input type="checkbox" value="downtown 250 en" id="">
            DOWNTOWN 250(EN)DOWNTOWN 250(EN)DOWNTOWN 250(EN) DOWNTOWN 250(EN)DOWNTOWN 250(EN)

                    </label>
                </div>

Answer 3

也许是这样？

＆＃13;

* {
    padding: 0;
    margin: 0;
}
.selected_area {
    background-color: #c8c8c8;
    padding:10px;
    height: 330px;
    border-radius: 5px;
    width:233px;
    margin: 20px;
}
.selected_area label {
    position: relative;
    margin: 10px 0;
    display: block;
}
.selected_area .label-text {
    position: relative;
    padding-left: 24px;
}
.selected_area input {
    position: absolute;
    top: 2px;
    left: 0;
}

＆＃13;

<div class="selected_area">
    <label>
        <input type="checkbox" value="scooter" id="">
        <div class="label-text fa-lg"><span>ScooterScooterScooterScooter ScooterScooterScooter cooterScooterScooterScooter ScooterScooterScooter</span>

        </div>
    </label>
    <label>
        <input type="checkbox" value="motorcycle" id="">
        <div class="label-text fa-lg"><span>Motorcycle</span>

        </div>
    </label>
    <label>
        <input type="checkbox" value="downtown 250 en" id="">
        <div class="label-text fa-lg"><span>DOWNTOWN 250(EN)DOWNTOWN 250(EN)DOWNTOWN 250(EN) DOWNTOWN 250(EN)DOWNTOWN 250(EN)</span>

        </div>
    </label>
</div>

＆＃13;

Answer 4

.label-text.fa-lg {
     display: inline-block;
}

查看此链接以获取有关display属性的更多帮助 https://css-tricks.com/almanac/properties/d/display/

如何使我的文本旁边没有复选框？

4 个答案: