将文本与缩进对齐

是否可以通过多行缩进来对齐文本并对其负责？就像窗户太小时破裂的两列一样。将文本与缩进对齐

例如：

当内容适合在一条线：

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>

因此，我希望同样的结果，而不设置的最小宽度或宽度文字“栏目”。

来源

2017-10-12 Tilo

难道你不能让他们2列吗？ – Huangism

你有没有试过的代码？ – schylake

可能的重复[最佳方式做HTML/CSS中的列]（https://stackoverflow.com/questions/9966890/best-way-to-do-columns-in-html-css） – Tijmen

误解了你的第一个问题。这种样式会根据屏幕尺寸进行调整。你会想要分配你的元素样式名称，因为这样会弄乱你的页面。

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

来源

2017-10-12 17:14:26 troxylvania

你可以用我添加的例子做一个例子吗？ – Tilo

被编辑为与您的新代码相关联。我之前提到的专栏是不必要的。 – troxylvania

我想要一个通用代码，所以没有b标签中的宽度。 – Tilo

CSS“列数”能够做到这一点，但如果文本和值对相关的，定义列表会更语义：

<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

来源

2017-10-12 17:27:47 htmlmonkey

您的解决方案中的问题是，dt的宽度固定为150px，而不是动态的。 – Tilo

这只是一个例子 - 宽度可以设置为任何相对度量单位（％，em等）。没有提供具体的设计或布局上下文，所以我扔了。 – htmlmonkey

我想要一个通用的代码，我必须设置没有宽度。所以我可以将它与更小和更长的文本一起使用。 – Tilo

将文本与缩进对齐

回答

相关问题