Question

从标题中可以看出，我试图将我的li元素集中在一个ul元素中。然而，尽管尝试了几种解决方案，如固定宽度+内联块，表格和表格单元格，但它似乎仍然不适合我。

基本上在我的情况下，我有一个按钮，并且旁边放置了一个ul，因为它们都是

display: inline;

所有想法？

<html>
    <head>
        <title>2i3</title>
        <style>
        * {
            font-family: Arial, Calibri, sans-serif;
        }
        #button {
            background-color: red;
            border: soild red 2px;
            border-radius: 200px;
            color: white;
            font-size: 20px;
            margin: 20px;
            display: inline-block;
            padding: 0px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
        #button:hover {
            background-color: #830d1e;
            box-shadow: 5px 5px 3px #888888;
        }
        #menu {
            list-style-type: none;
            text-align: center;
            padding: 0px;
            margin: 0px;
            display: inline;
        }
        #menu li {
            border: solid red 2px;
            border-radius: 100px;
            padding: 15px;
            width: 150px;
            display: inline-block;          
            color: blue;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
        }
        #menu li:hover {
            background-color: yellow;
            text-decoration: underline;
        }
        </style>
    </head>
    <body>
        <div id="button">O</div>
        <ul id="menu">
            <li>Guo Yulong</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </body>
</html>

编辑：抱歉，我不清楚，我想在li元素之间使用auto设置相等的边距。

Answer 1

从display:inline移除#menu并添加text-align:center;

Demo Fiddle

这基本上告诉ul将任何文字内容集中在一起，因为li设置为display:inline-block它们被有效地视为文本内容，因此居中。如果您希望按钮出现在菜单旁边，您可以选择多个选项，这是最简单的选项。是应用float:left to it

实际上有两种主要的内容集中方式：

文本对齐（内联元素）：将子元素设置为display:inline或display:inline-block，然后将父容器设置为text-align:center，子容器将居中于父级 - 取决于其宽度
保证金对齐（块元素）：如果子级内容是阻止级别（display:block）设置为父级text:align:center;，则为子级margin:0 auto提供固定宽度小于父级

Answer 2

HTML

<div class="menu-container">
    <ul id="menu" class="menu">
         <li>Guo Yulong</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
    </ul>
</div>

CSS

.menu-container {text-align: center;}
.menu-container ul {margin: 0px auto; display: inline-block;}

在ul内集中li

2 个答案:

Demo Fiddle