html / css中的文本对齐[关闭]答案

【问题标题】：text align in html/css [closed]html / css中的文本对齐[关闭]
【发布时间】：2016-07-02 17:29:41
【问题描述】：

如您所见，文本没有正确对齐。

我希望文本像这样显示，它也应该是合理的：

        Ethics/Moral:Respect for mankind,the environment and  fglll
                     nature without exceptionRespect for mankind,the   
                     environment and   nature without exception

下一行应该与上一行在同一点开始。我怎样才能在css中做到这一点

【问题讨论】：

欢迎来到 stackoverflow，我们将帮助您编写代码。您共享的代码越少，我们提供帮助的可能性就越小。
stackoverflow.com/questions/21316313/…
您是否希望每个缩进都相同，而不管每个缩进的粗体文本有多长？或者缩进应该取决于粗体文本的长度？
我更新了我的答案，以更好地展示我的意思是你可以做到的。如果我能做更多的事情来帮助您找到可行的解决方案，请告诉我。

标签： css text-align

【解决方案1】：

@MuFFes 提到了 text-indent 的 css 属性，但我更喜欢使用 dl、dt 和 dd 元素。

dt {
  float: left;
  clear: left;
  width: 100px;
  text-align: right;
  font-weight: bold;
}
dt:after {
  content: ":";
}
dd {
  margin: 0 0 0 110px;
  padding: 0 0 0.5em 0;
}

<dl>
  <dt>Ethics/Moral</dt>
  <dd>Respect for mankind, the environment and nature without exception.</dd>
  <dt>Honesty</dt>
  <dd>Treating everyone with sincerity and integrity.</dd>
  <dt>Quality/Safety</dt>
  <dd>Mankind and the environment, the product and its utilization -achieving the optimum together.</dd>
</dl>

【讨论】：

更重要的是，这是语义上最好的结构。

【解决方案2】：

通过使用flex，您可以这样做

注意，我添加的 br 只是为了显示它在断线时的行为

.row {
  display: flex;
}
.row ~ .row {
  margin-top: 5px;
}
.row div:first-child {
  color: steelblue
}

<div class="row">
  <div>
    Ethics/Moral:
  </div>
  <div>
    Respect for mankind, the environment and<br>nature - without exception 
  </div>  
</div>
<div class="row">
  <div>
    Honesty:
  </div>
  <div>
    Treating everyone with sincerity and<br>integrity 
  </div>  
</div>

如果您需要 2 个偶数列并具有动态内容，请使用 display: table-row/table-cell

.row {
  display: table-row;
}
.row div {
  display: table-cell;
}
.row ~ .row div {
  border-top: 10px solid transparent;
}
.row div:first-child {
  color: steelblue
}

<div class="row">
  <div>
    Ethics/Moral:
  </div>
  <div>
    Respect for mankind, the environment and<br>nature - without exception 
  </div>  
</div>
<div class="row">
  <div>
    Honesty:
  </div>
  <div>
    Treating everyone with sincerity and<br>integrity 
  </div>  
</div>

旁注：

正如 Paulie D 很好地指出的那样，dl/dt/dd 可能是语义上最合适的标记，尽管我建议的样式可能会给您想要的结果。随意将两者结合起来

【讨论】：

【解决方案3】：

我认为在这种情况下使用 ::first-line 伪元素是最好的。试试：

::first-line {
    text-indent: -40px;
}

你必须自己调整文本缩进。

使用您的代码示例也会更容易一些。

【讨论】：