Html 无序列表项的文本对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11328489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text align of an unordered list item
提问by bomortensen
I'm wondering if there's any way to make the text of an unordered list item appear as a "column" by the side of the standard disc/dot list item icon? Made a pair of screenshots:
我想知道是否有任何方法可以使无序列表项的文本在标准光盘/点列表项图标旁边显示为“列”？做了一对截图：
This is how it looks when using a standard unordered list with some text inside the list item (li):
这是使用在列表项 (li) 中包含一些文本的标准无序列表时的外观：
And this is how I want it to look:
这就是我想要的样子：
Is this possible without any image/div hacks? ;-) I've searched around to see if there's any standard CSS setting for it, but I couldn't seem to find any.
如果没有任何图像/div hack，这可能吗？;-) 我已经四处搜索，看看是否有任何标准的 CSS 设置，但我似乎找不到任何。
Thanks a lot in advance!
非常感谢！
All the best,
祝一切顺利，
Bo
博
采纳答案by Rohit Azad
You can simply code it like this:
你可以简单地像这样编码：
HTML
HTML
<ul>
<li>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
CSS
CSS
ul{
margin:0;
padding:0 20px;
}
ul li {
padding:0;
width:150px;
background:red;
margin:10px 0;
}
回答by KevinH
list-style-positionis the property you are looking for. It works in all browsers. (see MDNfor more details)
list-style-position是您正在寻找的属性。它适用于所有浏览器。（更多细节见MDN）
ul {
list-style-position: outside;
/* You may want to add an additional padding-left: */
padding-left: 1.5em;
}
But actually outsideit is the default value. You probably overwrite it somewhere else.
但实际上outside它是默认值。您可能会在其他地方覆盖它。
回答by Rohit Azad
I think floating list items to the left is the best solution to make them appear as columns.
我认为左侧的浮动列表项是使它们显示为列的最佳解决方案。
This CSS code may help you:
此 CSS 代码可以帮助您：
<style type="text/css">
ul > li {
margin: 0 10px;
width: 150px;
float: left;
}
</style>
回答by Sakthivel
It is just enough to use text surround with open(<li>) and closed(</li>) tags under <ul> tag.
在 <ul> 标签下使用带有 open(<li>) 和 closed(</li>) 标签的文本环绕就足够了。
For example,
例如，
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
<li>This is list item - 2</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
<li>This is list item - 4</li>
</ul>
Output will be,
输出将是，
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- This is list item - 2
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
- This is list item - 4
- Lorem ipsum dolor sat amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua。Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat。
- 这是列表项 - 2
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。例外 sint occaecat cupidatat non proident, sunt in culpa qui offcia deserunt mollit anim id est labum
- 这是列表项 - 4
回答by paddotk
Add this
添加这个
ul {
display:inline-block;
}
to your css code.
到您的 css 代码。
