我的目标是在.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>

===============>>#1 票数:2 已采纳

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

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

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

2)关于宽度的另一个问题并不是真正的错误,页面恰好按照您的要求去做。 中间部分保持33%的宽度,当前内容适合该区域的唯一方法是下拉。

这样一来,您可以编写规则来控制这种情况下内容发生的情况。

将宽度应用到元素时要记住的一件事是,如果您随后应用左或右页边距(或填充),则它可能会打乱宽度计算,并且您获得的宽度可能与预期的不同。

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

在不了解您的示例的情况下,我无法提供确定的解决方案,但是一种方法是在#menuBar div上设置min-width:

我包括一个JSFiddle进行演示。

===============>>#2 票数:1

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

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

===============>>#3 票数:1

我认为这是您想要的:

工作:演示

只需更改以下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;
}

  ask by mellamojoe translate from so

未解决问题?本站智能推荐:

1回复

为什么我的背景延伸到页面顶部的边缘,而不延伸到页面底部?

我正在编辑网页底部的背景,并注意到背景周围的白色边框无法反映网页的顶部。 我尝试了包括top: 0;的通常解决方案top: 0; right: 0; 我还包括了background-size: cover,但这也没有解决问题。 这是我的CodePen,因此您可以查看HTML和CS
1回复

HTML将div延伸到底部

我有一个带有顶部栏和底部栏的html布局。 我希望将page-div拉伸到底部。 我不想使用底部栏的固定位置。 因为我希望底部栏始终位于页面底部(而不是屏幕底部)。 有人对此有解决方案吗? 谢谢是前进!
6回复

div没有延伸到身体顶部

这是我目前拥有的: https : //jsfiddle.net/xdzadbo0/4/ 如您所见,容器div没有延伸到顶部。 搜索这个,似乎有margin: 0;很重要margin: 0; 和padding: 0; 在一切上。 这样做,我可以将宽度扩展到边缘,但是我仍然没有顶部一
1回复

无法使zurb基础列延伸到页面底部

我正在尝试制作一个三列布局,该布局延伸到使用Zurb Foundation网格的屏幕底部。 基本结构由三列组成,每列的中间都有一个标题,并带有独特的背景图像和页脚。 这就是我要实现的目标(其中三种颜色将是背景图像): 问题在于,由于没有足够的内容填充屏幕,因此我的专栏不会
2回复

如何设置容器的高度,使其从网页顶部向下延伸到底部?

我是Web开发的新手,正在建立一个网站来练习我的技能。 到目前为止,我已经可以按自己的喜好自定义所有内容,但是遇到了Google无法帮助我的问题。 基本上,我只是想复制此Yahoo页面。 请注意,页面中间有一个白色容器,该容器从导航栏一直延伸到页面末尾。 然后,在容器的两侧都有灰色背
1回复

如何使边界一直延伸到边缘?

好的,所以我有一个使用母版页和CSS样式表的网站。 我在使表格边框一直到达边缘时遇到麻烦。 我感觉这将需要一些故障排除,但如果没有的话,它很棒。 我要尝试使用的网站在此处 ,主页上的主表上有一个边框,我想在横幅菜单下方设置边框以一直延伸到边缘。 当我为mainTable样式规则取出边框间
3回复

将底部边框延伸到右侧

是否可以将底部边框移动到侧面(在我的示例中为右侧)。 我的页面左侧有图片,我想在这些单独的图片的右侧有<h3>标题。 另外,我想用border-bottom属性强调这些标题。 这个边界应该是站点长度的66%,它应该从<h3>开始向右移动(没有穿过图片)。
2回复

Bootstrap div延伸到页面底部

我有默认的bootstrap模板设置,我的问题是div和页脚之间有空格。 白色空间是由于没有足够的内容来填充整个页面而引起的,因此正文显示在页脚和内容div之间。 有没有办法将引导div拉伸到页面底部,同时还使页脚保持在最底部? 可能有柔性盒? 这是我正在使用的代码:(尝试将“包装器
1回复

将DIV延伸到页面底部,上方有一个元素

我尝试将DIV延伸到页面底部,并在其上方放置一个元素。 基本上可以,但是将元素上方的元素高度添加到DIV中。 请参阅jsFiddle示例: http : //jsfiddle.net/CjKFX/ 如何解决这个问题?
3回复

容器不会延伸到页面底部

我现在非常沮丧。 我无法弄清楚为什么我的容器不会扩展到页面底部。 它到达可见窗口的底部,但如果向下滚动,则背景结束。 我的基本结构看起来像这样...... 所以这基本上就是HTML。 我不能为我的生活弄清楚为什么#container不会扩展到页面的底部! 和CSS