html - 对齐文本与缩进

Question

是否可以将文本与多行缩进对齐并负责？ 就像当窗口太小时会折断的两根柱子。

例如:

当内容适合一行时:

Text        Value
Longer Text Value
Text        Longer Value

当内容不适合一行时:

Text
Value

Longer Text
Value

Text
Longer Value

---

第一个文本应该足够长，所以我不想在它后面有额外的空间。

这是一个例子，其中我有一个固定长度的文本“列”:

dt {
  width: 6em; //I want a solution without a width
  display: inline-grid;
}

dt,
dd {
  float: left
}

dt {
  clear: both
}

<dl>
  <dt>Text</dt>
  <dd>Value</dd>
  <dt>Longer Text</dt>
  <dd>Value</dd>
  <dt>Text</dt>
  <dd>Longer Value</dd>
</dl>

所以我希望在不设置文本“列”的最小宽度或宽度的情况下获得相同的结果。

Answer 1

误解了你的第一个问题。这种样式会根据屏幕尺寸进行调整。您需要指定您的元素样式名称，因为仅使用它会弄乱您的页面。

.lineTitle{
  width: 6em;
  display:block;
  font-weight:bold;
}
.yourList  {margin-bottom:10px; }

@media (min-width:768px){
.lineTitle {display: inline;}
  .yourList  {margin-bottom:0px; }
}

更新:您只需将它们包裹在 span 中并命名即可。

 <div>
  <div class="yourList">
    <span class="lineTitle">Text</span>
    <span class="lineValue">Value</span>
  </div>
   <div class="yourList">
    <span class="lineTitle">Text</span>
    <span class="lineValue">Value</span>
  </div>
  <div class="yourList">
    <span class="lineTitle">Text</span>
    <span class="lineValue">Longer Value</span>
  </div>
</div>