并排跨度元素

I have placed three span elements side by side inside a div. Third span element contains text i have added word-break css property so that if the text exceeds width the text breaks. Now how can i apply margin to the text which is in next line to align with above lines.

我在div内并排放置了三个span元素。第三个span元素包含我添加了word-break css属性的文本,这样如果文本超出宽度,文本就会中断。现在,我如何将余量应用于下一行中的文本以与上面的行对齐。

<div class="legend_data" style="line-height:18px;word-break:break-word">
  <span class="legend_text" style="float: left;">
    <input type="checkbox" value="test">
  </span>
  <span style="background-color:#32CD32;float: left;width: 12px;
   height: 12px;"></span>
  <span class="legend_text" style="margin-left: 1%;"> sample text  sample  text sample text sample text sample text sample text sample text sample text sample text sample text
  </span>
</div>

jsfiddle link

1 个解决方案

#1

A bit of restructuring might get you on your way.

一些重组可能会让你在路上。

Firstly, move <span class="legend_text" style="float: left;">...</span> and <span style="background-color:#32CD32;float: left;width: 12px; height: 12px;"></span> in a separate container div and float it to the left, like below:

首先,移动 ... 和在一个单独的容器div中并将其浮动到左侧,如下所示:

<div class="legend_data_controls">
    <input type="checkbox" value="test">
    <span class="legend_text_box"></span>
</div>

Then set overflow:hidden on parent element to clear floats

然后设置overflow:隐藏在父元素上以清除浮点数

.legend_data {
    line-height: 18px;
    word-break: break-word;
    overflow: hidden;
}

And that should be it.

这应该是它。

HTML:

<div class="legend_data">
    <div class="legend_data_controls">
        <input type="checkbox" value="test">
        <span class="legend_text_box"></span>
    </div>
    <div class="legend_data_content">
        <span> sample text  sample  text sample text sample text sample text sample text sample text sample text sample text sample text
        </span>
     </div>
</div>

CSS:

.legend_data {
    line-height: 18px;
    word-break: break-word;
    overflow: hidden;
}

.legend_data_controls {
    float: left;
}

.legend_data_controls input {
    vertical-align: middle;
    display: inline-block;
}

.legend_text_box {
    background-color:#32CD32;
    /*float: left;*/
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
}

.legend_data_content {
    margin-left: 50px;
}

Fiddle link

Hope that helps

希望有所帮助

#1