并排对齐跨度元素答案

【问题标题】：Align span elements side by side并排对齐跨度元素
【发布时间】：2015-08-13 05:14:26
【问题描述】：

我在一个 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

【问题讨论】：

你当前的代码是什么样的？
请edit您的问题包含您的代码。我不确定你想做什么。为什么一开始需要那两个spans？为什么不简单地将padding-left 设置为包含框？
那些是spans 图标还是类似的东西？
请说明第二个跨度的目的是什么。它的可能内容是什么？它可以有多大？

标签： css

【解决方案1】：

稍作调整可能会让您顺利上路。

首先，将<span class="legend_text" style="float: left;">...</span> 和<span style="background-color:#32CD32;float: left;width: 12px; height: 12px;"></span> 移动到单独的容器div 中，并将其浮动到左侧，如下所示：

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

然后将父元素上的overflow:hidden 设置为clear floats

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

应该就是这样。

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

希望有帮助

【讨论】：