Html 如何将无序列表居中？_Html_Css_Html Lists_Center

Html 如何将无序列表居中？

html css

Html 如何将无序列表居中？,html,css,html-lists,center,Html,Css,Html Lists,Center,我需要将宽度未知的无序列表居中，同时保持列表项左对齐达到与此相同的结果： HTML <div> <ul> <li></li> <li></li> <li></li> </ul> </div> 除了我的没有父div之外。ul{margin:0 auto；}不工作，因为我没有固定的宽度ul{text align:c

我需要将宽度未知的无序列表居中，同时保持列表项左对齐

达到与此相同的结果：

HTML

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

除了我的

没有父div之外。

ul{margin:0 auto；}

不工作，因为我没有固定的宽度

ul{text align:center；}

无法工作，因为列表项将不再左对齐。那么，如何使

居中，同时保持
左对齐（没有父div包装器）






编辑：也许我的措辞不是最好的。。。第一段代码已经可以工作了。。。我需要的是在不使用
包装器的情况下执行，当然，如果可能的话。花招？伪元素把戏？一定有办法。

如果您可以使用自己的列表项目符号
试试这个：
<html>
    <head>
        <style type="text/css">

            ul {
                margin:0;
                padding:0;
                text-align: center;
                list-style:none;                
            }
            ul  li {
                padding: 2px 5px;               
            }

            ul li:before {
                content:url(http://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon-blue.jpg);;
            }
        </style>
    </head>
    <body>

            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>

    </body>
</html>


保险商实验室{
保证金：0；
填充：0；
文本对齐：居中；
列表样式：无；
}
ulli{
填充物：2px 5px；
}
李：以前{
内容：网址(http://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon-blue.jpg);;
}

一,
二,
三,


ul{
显示：表格；
保证金：0自动；
}


56456456
4564564564646499999999999999999999996
45645

从您的帖子中，我了解到您无法设置li的宽度
这个怎么样

ul{
边框：2倍纯红；
显示：内联块；
}
李{
显示：内联；
填充：0 30%；/*尝试调整侧边%，以提供中心对齐的感觉*/
}

你好
赫兹克夫什夫克罗
你好
要将无序列表居中对齐，需要使用CSS文本对齐属性。除此之外，还需要将无序列表放入div元素中
现在，将样式添加到div类中，并使用“文本对齐”特性，将“中心”作为其值
请参见下面的示例
<style>
.myDivElement{
    text-align:center;
}
.myDivElement ul li{
   display:inline;

 }
</style>
<div class="myDivElement">
<ul>
    <li>Home</li>
    <li>About</li>
    <li>Gallery</li>
    <li>Contact</li>
</ul>
</div>


.myDivElement{
文本对齐：居中；
}
李先生{
显示：内联；
}

家
关于
画廊
接触


这是参考网站
假设列表是：
<ul>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
</ul>

而且它有效！下面是正在发生的事情。首先，我们说我们只想影响无序列表。然后，我们使用Rafael Herscovici的技巧将列表项居中。最后，我们建议将文本与列表项的左侧对齐。
以防点粘在左侧，而文本与中心对齐。您可以从脚本中删除“ul”
例如：
<!doctype html>
 <html>
    <style>
        div.list {
            text-align: center;
        }
    </style>
    
    <body>
        <div class="list">
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </div>
    </body>
</html>


分区列表{
文本对齐：居中；
}
嗨
嗨
嗨
列表样式位置：内部
使用列表样式位置：内部

ul{
文本对齐：居中；
列表样式位置：内部；
}

一个
两个
三
您必须设置ul
和li
的宽度，以便让浏览器知道如何将内容居中。查看您的代码，是的，我希望得到结果，但没有家长。@Sunny嘿，请查看我的答案您是否阅读了问题？“我需要将一个未知宽度的无序列表居中”…不，第一行与原始问题中的相同。现在它可以工作：），没有父div，没有强制宽度。好的'ol table。完美的fiddle并没有像问题中预期的那样工作，预期的结果应该是这样，而不使用：before伪元素。我的问题是我的ul没有div包装器，即使没有div包装器也没问题。它仍然会将内容与中心对齐。我已经编辑了我的答案。如果你没有div，那么UL将占据整个页面的宽度container@Sunny刚刚又做了一次编辑。这绝对可以解决你的问题！嗯，它肯定会有用的。但这是一种严重的反模式，强烈建议大家遵循语义HTML结构。通过在ul
或ol
标记上使用CSS属性列表样式：none，也可以实现相同的效果。
<ul>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
</ul>

ul {
    display: table; 
    margin: 0 auto;
    text-align: left;
}

<!doctype html>
 <html>
    <style>
        div.list {
            text-align: center;
        }
    </style>
    
    <body>
        <div class="list">
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </div>
    </body>
</html>