如何防止复选框/单选按钮下的长文本标签包装？

Question

Sample Markup and CSS

＆＃13;

＆＃13;

.wrap {
  width: 220px;
}

.indi-wrap {
  padding-bottom: 10px;
}

.control-label {
  display: inline;
  font-weight: 300;
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

＆＃13;

<div class="wrap">
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Xonsectetur adipiscing.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意： 我知道我可以将复选框包装在标签内以修复它，但是从＆＃34; indi-wrap＆＃34;开始。将其自动填充在父级内部＆＃34; wrap＆＃34;因此，我无法在＆＃34; indi-wrap＆＃34;中编辑任何内容。

有没有办法在文本标签的第一行对齐第二行？防止它在复选框下包装。

Answer 1

保持现有标记，实现某些目标的一种简单方法是在inline-block的3个子项上使用.indi-wrap，在{1}}中使用max-width将它们全部放在一行中。< / p>

.indi-wrap > * {
    display: inline-block !important;
    max-width: 70%;
    vertical-align: top;
}

.wrap {
  width: 220px;
}

.indi-wrap {
  padding-bottom: 10px;
  display: block;
}

.indi-wrap > * {
    display: inline-block !important;
    max-width: 70%;
    vertical-align: top;
}
.control-label {
  font-weight: 300;
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

<div class="wrap">
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Xonsectetur adipiscing.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
</div>

Answer 2

一种方法是将输入和按钮放在标签内，然后使用<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:descendantFocusability="blocksDescendants" tools:context="com.cj.myapplication.MainActivity"> <EditText android:id="@+id/editText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:focusableInTouchMode="true" android:text="Name" /> </RelativeLayout> 作为标签以及正负边距，例如

display:block

.wrap {
  width: 220px;
}

.indi-wrap {
  padding-bottom: 10px;
}

label.control-label {
  display:block;
  font-weight: 300;  
    margin-left: 20px;
}
input{  
    float: left;
    margin-left: -20px !important;
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

Answer 3

你可以试试这样的事情

＆＃13;

＆＃13;

.wrap {
  width: 220px;
}

.indi-wrap {
  position: relative;
  padding-bottom: 10px;
}

.indi-wrap input[type='checkbox'] {
  position: absolute;
  left: 0;
}

.control-label {
  padding-left: 20px;
  font-weight: 300;
  font-size: 14px;
  display: block
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 14px;
  padding-left: 20px;
}

＆＃13;

<div class="wrap">
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Xonsectetur adipiscing.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用flexbox来实现此目的。

＆＃13;

＆＃13;

.wrap {
  width: 220px;
}

.indi-wrap {
  padding-bottom: 10px;
  display: flex;
  align-items: flex-start;
}
.indi-wrap input { flex: 1; }
.indi-wrap label { flex: 7; }

.control-label {
  display: inline;
  font-weight: 300;
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

＆＃13;

<div class="wrap">
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Xonsectetur adipiscing.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;