英文:
How can I get margin exactly in the width of imaginary text content?
问题
以下是代码部分的翻译：
这是我正在使用的列表：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
font-family: Arial;
}
ol {
counter-reset: item;
}
li {
display: block;
}
li:before {
content: counters(item, ".") " "; /* 这里是CSS代码 */
counter-increment: item;
}
ol li ol li {
margin-left: 80px; /* 左边距应与一个数字和一个 &emsp; 的宽度完全相同 */
}
<!-- language: lang-html -->
<ol>
<li>Coffee
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>Tea
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>Milk</li>
<li>Cool</li>
</ol>
<!-- end snippet -->
希望这有所帮助。
英文:
This is a list I am working with:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
font-family: Arial;
}
ol {
counter-reset: item;
}
li {
display: block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
ol li ol li {
margin-left: 80px; /* The left margin should have exactly the width of one number and a &emsp; */
}
<!-- language: lang-html -->
<ol>
<li>Coffee
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>Tea
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>Milk</li>
<li>Cool</li>
</ol>
<!-- end snippet -->
The ol li ol li currently has margin-left: 80px;. Now it would be possible to manually adjust the px value in a way that for example 1.1 is perfectly left aligned with Coffee. But to make sure it will be always perfectly aligned, also with other fonts, I would like to insert an invisible space of one number and a &emsp;. With that, it should be perfectly aligned on one line.
Here is an image to show how it should look like:
How can this be done? I would be very thankful for help.
答案1
得分: 2
Float可以做到这一点。您可以使用一个带有微小底边距的浮动元素来使第一个数字浮动，并且它将通过其宽度将一切推到右边。
英文:
Float can do it. You make the first number float with a tiny bottom margin and it will push everything to the right by its width.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
font-family: Arial;
}
ol {
counter-reset: item;
}
li {
display: block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
/* select li that has "ol" */
li:has(ol):before {
float: left;
margin-bottom: 5px; /* small value */
}
ol ol {
overflow: hidden; /* create a formatting context for the float */
}
<!-- language: lang-html -->
<ol>
<li>Coffee
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>Tea
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>Milk</li>
<li>Cool</li>
</ol>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论