Question

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

例如：

当内容适合一行时：

Text        Value
Longer Text Value
Text        Longer Value

当内容不适合一行时：

Text
Value

Longer Text
Value

Text
Longer Value

第一篇文章应该需要很长时间，所以我不会在它背后留出额外的空间。

这是一个示例，其中我有一个固定长度的文本＆＃34;列＆＃34;：

＆＃13;

dt {
  width: 6em; //I want a solution without a width
  display: inline-grid;
}

dt,
dd {
  float: left
}

dt {
  clear: both
}

＆＃13;

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

＆＃13;

所以我想要相同的结果而不设置文本的最小宽度或宽度＆＃34;列＆＃34;。

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; }
}

更新：你只需要将它们换成跨度并命名它们。

 <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>

Answer 2

CSS“column-count”可以实现这一点，但如果文本和值对相关，定义列表将更具语义性：

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

使用媒体查询，您还可以更改较小屏幕尺寸和较大屏幕尺寸的布局。

这里的工作示例：https://codepen.io/code-and-pixels/pen/WZKKgE

将文本与缩进对齐

2 个答案: