是什么导致我的边界无法延伸到顶部和底部？

Question

我的目标是在.toggles（“ HTML，CSS，JS，结果”）周围有一个框，据我的指导者说，我们应该设置一个右边界，该边界将向上延伸并与周围的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进行演示。

Answer 2

您的元素仅占用该空间。 'body'周围有8px的页边空白，因此，如果删除该栏，则条形将占据页面的100％。

如果要让类别切换占用更多空间，则需要为其设置高度值。

Answer 3

我认为这是您想要的：

工作：演示

只需更改以下CSS：

CSS

    .toggles li {
    margin:0%;
    list-style: none;
    display: table-cell; /* Or use display:inline-block; but it will destroy vertical alignment of text*/
    vertical-align: middle; 
    height:35px; /*ADDED : You didn't specified the height*/
    padding: 0 5px; 
    border-right: 1px solid black;
}