html - 是什么导致我的边框没有延伸到顶部和底部？

Question

我的目标是在 .toggles ("HTML, CSS, JS, Result") 周围设置一个框，根据我的导师的说法，我们应该设置一个 border-right 向上延伸并与周围的 1px 相交黑色边框。是什么导致出现在每条垂直线上方和下方的空间？

JSBIN:http://jsbin.com/qipuzubure/1/

(在创建这个jsbin的过程中出现了一个新问题:为什么当窗口缩小时内部div会塌陷在自身之上？)

    body {
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
        font-weight: 300;
    }


    #menuBar {
        width: 100%;
        height: 2.5em;
        display: table; 
        background-color: gray; 

    }

    #logo,
    #buttonDiv,
    .toggles {
        display: table-cell;
        vertical-align: middle; 
        width: 33%; 
    }

    .toggles {
        width: 20% ;
    }


    #logo {
        font-weight: bold; 
        font-size: 1em; 
        font-family: helvetica; 
        vertical-align: middle; 
        padding-left: 10px; 

    }

    .toggles {
        text-align: center; 
        border: 1px solid black;
        padding-bottom: 1px; 


    }

    .toggles ul {
        padding: 0;



    }

    .toggles li {
        list-style: none;
        display: inline;
        padding: 0 5px; 
        border-right: 1px solid black;

    }

    #buttonDiv {
        text-align: right; 
        padding-right: 10px; 
    }





</style>

<div id="wrapper">

    <div id="menuBar">

        <div id="logo">CodePlayer</div>

            <ul class="toggles">
                <li>HTML</li>
                <li>CSS</li>
                <li>JS</li>
                <li>Result</li>
            </ul>

        <div id="buttonDiv">

            <button id="runButton">Run</button>

        </div>


    </div>

</div>

Answer 1

1) 顶部和底部边框可见，因为您正在使用 display: table 显示菜单。

display: table 和 display: table-cell 仅在创建表格或特殊情况下才需要。

由于您正在创建菜单栏，因此您可以对某些内部元素使用 display: inline-block。这将帮助您正确设置页面样式。

2) 关于宽度的另一个问题并不是真正的错误，该页面完全按照您的指示进行操作。中间部分保持 33% 的宽度，当前内容适合该区域的唯一方法是下拉。

说到这里，您可以编写规则来控制在这种情况下内容会发生什么。

将宽度应用到元素时要记住的一件事是，如果您随后应用左边距或右边距(或填充)，它可能会导致宽度计算失败，您可能会得到与预期不同的宽度。

最稳定的方法是将元素包装在容器中并设置容器的宽度。

在不了解您的示例的更多信息的情况下，我无法给出明确的解决方案，但一种方法是在 #menuBar div 上设置 min-width:。

我添加了一个 JSFiddle进行演示。