将多行文本与标签对齐，缩进相同

Question

我有一个相当简单的问题，我无法在任何地方找到正确的解决方案。

我有一个标签，旁边的文字将换行到下一行。我希望包装的文本完全缩进。但我希望第一行文字与标签对齐。 inline-block 和 float 都只是使文本出现在下一行。

** 标签和文本行的宽度未知

我想要的：

.item div {
 display: inline-block;
}

.label {
  float: left;
}

.text {
 float: left;
}

<div class="item">
  <div class="label">Label:</div>
  <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div>
</div>

Answer 1

在这种情况下您需要使用定位。这是固定流体的情况：

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

或

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

固定流体模型。在我的代码片段中，我演示了两种示例。在第一种情况下，流体的尺寸较小。而且下一个内容太长了。

片段

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid</div>
</div>

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>

工作代码段

.parent {position: relative; margin: 0 0 15px; padding: 5px; padding-left: 100px; min-height: 50px;}
.parent .fixed {position: absolute; left: 5px; width: 90px;}
.parent .fluid {}

<div class="parent">
  <div class="fixed"><strong>Label</strong></div>
  <div class="fluid">The Text</div>
</div>
<div class="parent">
  <div class="fixed"><strong>Label</strong></div>
  <div class="fluid">A longer text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magni ipsam facilis laboriosam nesciunt eveniet obcaecati dicta laborum voluptatem reiciendis, possimus vel enim. Dignissimos assumenda ipsa aut. Facere, unde animi.</div>
</div>

Answer 2

您应该可以使用内联块来实现此目的。看看这个

div.item {
    width: 500px;
}

.label {
    float: left;
    display: inline-block;
    width:50px;
}

.text {
   float: left;
   display: inline-block;
   width: 450px;
}

<div class="item">
    <div class="label">
        <strong>Label:</strong>
    </div>
    <div class="text">
        Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. 
        The first line should remain inline with the label untill it wraps.
        Both the label and the text are unknown lengths. 
        I can't seem to accomplish this with either floats or inline-block.
    </div>
    <div style="clear:both;"></div>
</div>

Answer 3

您可以使用 display: table; 和 display: table-cell;

.item {
 display: table;
}

.label {
  display: table-cell;
}

.text {
  display: table-cell;
}

<div class="item">
  <div class="label">Label:</div>
  <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div>
</div>

Answer 4

.item div {
 display: inline-block;
}

.label {
  float: left;
  width:15%;
}

.text {
 float: right;
 width:85%;
}

<div class="item">
  <div class="label">Label:</div>
  <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div>
</div>

将多行文本与标签对齐，缩进相同

Aligning multiple lines of text with label, with same indentation

html

css

css-float