Question

我尝试使用以下条件编写CSS菜单：

没有javascript
项目
第一项坚持左侧
最后一项坚持到右边
项目之间没有空格
单词之间的空格相同（每个项目的填充相同）

这是html：

<ul id="menu">
    <li>Breadfruit</li>
    <li>Bilberry</li>
    <li>Blackberry</li>
    <li>Blackcurrant</li>
    <li>Blueberry</li>
    <li>Boysenberry</li>
    <li>Cantaloupe</li>
    <li>Currant</li>
    <li>Cherry</li>
</ul>

这是基本的CSS：

#menu{width:960px;background:#ccc;}
#menu li{padding:10px 0;text-align:center;background:#000;}

我尝试了什么：

“float：left”并在“li”上指定宽度：它可以工作，但它不是flexbile。如果单词大小发生变化，则样式会被破坏。
“显示：内联块;填充：10px的;”在“ul”上的“li”和“text-align：center”：第一个项目没有粘在左边，最后一个项目没有粘在右边。
“显示：弯曲;证明含量：空间之间;”在“ul”：项目之间有空格。
“显示：弯曲;” “li”上的“ul”和“flex：1”：单词之间没有相同的空格。
“显示：表;” “li”上的“ul”和“display：table-cell”：单词之间没有相同的空格。

你有想法吗？我甚至不知道是否可能：）

提前谢谢！

Answer 1

_{既然您已经编辑了问题并展示了一些努力，我很乐意为您提供帮助。}

如果您不需要支持IE7或更低版本，可以使用display:table-cell，如下所示：

 #menu li {
  display:table-cell;
  width:1%;
 }

选中 Fiddle Demo

Answer 2

可以使用flexbox实现，也许使用display：table作为后备

应用于所有元素的flex-basis:10px;相同的技巧

showing spacing

DEMO ：http://jsfiddle.net/T2G6F/

#menu
{
    background:#ccc;
    list-style:none;
    font-family:sans-serif;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:row;
}

#menu li
{
    text-align:center;
    background:#000;
    color:white;
    display:block;
    margin:0;
    padding:8px 10px;
    border:1px red solid;
    text-overflow:ellipsis;
    overflow:hidden;
    flex-basis:10px;
    flex:1 1 auto;
}

Answer 3

您可以尝试使用display：table和display：table-cell。

<style>

    #menu
    {
        width: 100%;
        height: 50px;
        display: table;
        background-color: black;
    }

    .menu-item
    {
        display: table-cell;
        color: white;
        vertical-align: middle;
        text-align: center;
    }

</style>

像这样。

<div id="menu">
        <div class="menu-item">Item 1</div>
        <div class="menu-item">Item 2</div>
        <div class="menu-item">Item 3</div>
        <div class="menu-item">Item 4</div>
        <div class="menu-item">Item 5</div>
        <div class="menu-item">Item 6</div>
        <div class="menu-item">Item 7</div>
        <div class="menu-item">Item 8</div>
    </div>

请注意，您可能无法在单词之间设置完全相同的空格。但是，居中文本并让菜单项没有定义宽度可能会让你接近你想要的。

为水平菜单中的每个按钮分配水平填充

3 个答案: