Question

我的目标是在.toggles（“HTML，CSS，JS，结果”）周围有一个方框，根据我的导师，我们应该设置一个边界右边，可以扩展并与周围的1px相遇黑色边框。是什么导致出现在每条垂直线上下的空间？

（在创建这个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

你的元素只占据那个空间。＆＃39;身体＆＃39;周围有8px的保证金，所以如果你删除你的酒吧将占到页面的100％。

如果你想让你的classe切换占用更多，你需要设置一个高度值。

Answer 3

我认为这就是你想要的：

WORKING: DEMO

只需更改后续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;
}

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

3 个答案: