如何在不使用max-width的情况下以标准方式对齐标签？

Question

这是小提琴：https://jsfiddle.net/udyzyoq6/

• 绿色框架是我想要实现的目标
• 红框是失败的例子

HTML（对于失败的示例）：

<div class="parent">
  <div class="square"></div>
  <label class="label">
    Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
  </label>
</div>

CSS（失败示例）：

.parent {
    width: 300px;
    border: solid 1px red;
}

.square {
    width: 15px;
    height: 15px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
}

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

我想要在标签上设置max-width - 我只是希望它自动使用.parent（300px-15px）的所有可用空间。在我的示例中，如果我不在标签上设置max-width，那么长文本会打破布局（如红框所示）。

编辑：我不想在除.parent（宽度= 300像素）和.square（宽度= 15像素，高度= 15像素）之外的任何元素上设置任何固定宽度。我希望它能自动/动态调整到.parent容器宽度。

Answer 1

使用display: table

.parent {
    width: 300px;
    border: solid 1px green;
    display: table;
}

.parent.error-frame {
    border-color: red;
}
.parent > div{
    display: table-cell;
}
.parent > div:nth-of-type(1){
    vertical-align: middle;
}
.square {
    width: 15px;
    height: 15px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
}
.label {
    display: inline-block;
    vertical-align: middle;    
    padding-left: 5px;
}

<div class="parent">
    <div>
        <div class="square"></div>
    </div>
     <div>
         <label class="label">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>         
     </div>   
</div>
<br>
<div class="parent">
    <div>
        <div class="square"></div>
    </div>
     <div>
         <label class="label">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>         
     </div>   
</div>

Answer 2

您不需要设置max-width。由于您使用的是设置像素宽度，因此只需将标签类上的width设置为您需要的任何像素宽度，在本例中为285px。

Fiddle so you can see it.

Answer 3

您可以使用flexbox：

来实现此布局

• 将display: flex;添加到.parent，这会告诉其子级使用flexbox型号
• 将align-items: center;添加到.parent，这会垂直对齐孩子
• 将flex: 1;添加到.label-without-max-width，这会告诉它占用尽可能多的空间

.parent {
  align-items: center;
  border: solid 1px green;
  display: flex;
  width: 300px;
}
.parent.error-frame {
  border-color: red;
}
.square {
  background-color: blue;
  height: 15px;
  width: 15px;
}
.label {
  max-width: 250px;
}
.label-without-max-width {
  flex: 1;
  max-width: none;
}

<div class="parent">
  <div class="square"></div>
  <label class="label">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>
</div>
<br>
<div class="parent error-frame">
  <div class="square"></div>
  <label class="label label-without-max-width">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>
</div>

支持flexbox非常好（减去IE的旧版本）http://caniuse.com/#feat=flexbox