Question

我有一个使用Bootstrap 3的网页。在这个网页中，我显示了一些单选按钮。我的单选按钮是风格化的，所以我有一个附加元素。不过，这些单选按钮的标签很长。此时，它们呈现如下：

• This is my label. It can be rather long and
wrap to the next line. There could be four or 
even more lines.

但是，我希望它们像这样呈现：

• This is my label. It can be rather long and
  wrap to the next line. There could be four or 
  even more lines.

注意标签文本是如何缩进的。它与其他文本的合理性是合理的。为了做到这一点，我有以下内容：

<div style="width:200px;">
  <label class="my-radio">
     <input data-val="true" id="myChoice" name="myChoice" type="radio" value="1">
     <span class="my-indicator">♥</span>
     This is a long block of block of text that should wrap. But, the second line should be indented        
   </label>
</div>

如此Bootply所示，标签文本不缩进。我不知道该怎么做。我需要能够单击单选按钮本身或文本来选择项目。出于这个原因，我没有使用桌子。

Answer 1

如果Flex box解决方案可以接受，您可以尝试将文本内容放入容器中，并将flex box应用于父label。根据您的要求调整宽度。

＆＃13;

label {
  width: 320px;
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  align-items: flex-start;
  justify-content: space-between;
}
label input {
  margin-right: 10px;
}

＆＃13;

<div style="width:200px;">
  <label class="my-radio">
    <input data-val="true" id="myChoice" name="myChoice" type="radio" value="1">
    <section>
      <span class="my-indicator">♥</span>
      This is my label. It can be rather long and wrap to the next line. There could be four or even more lines.
    </section>
  </label>

</div>

＆＃13;

Answer 2

.my-radio {
    padding-left: 35px;
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
#myChoice {
    position: absolute;
    left: 5px;
    top: 0;
}

<div style="width:200px;">
  <label class="my-radio">
     <input data-val="true" id="myChoice" name="myChoice" type="radio" value="1">
     <span class="my-indicator">♥</span>
     This is a long block of block of text that should wrap. But, the second line should be indented        
   </label>
</div>

Answer 3

您可以使用负边距（bootply）：

CSS

.my-radio {
  padding-left:30px;
}
.my-radio input {
  margin-left:-20px;
}

HTML

<div style="width:200px;">
  <label class="my-radio">
     <input data-val="true" id="myChoice" name="myChoice" type="radio" value="1">
     <span class="my-indicator">♥</span>
     This is a long block of block of text that should wrap. But, the second line should be indented

   </label>
</div>

CSS - 带有输入字段的长文本块

3 个答案: