Question

我试图让按钮不在彼此之上！我很确定我需要在CSS代码中添加一个简单的属性，但我似乎无法弄清楚它！此外，是否有一种方法可以让按钮填满整个屏幕，而不会出现下方的滚动条！我试图在填充中使用100％部分，但这使得页面非常大！

<style>

    div#menubar2 > a{
        font-family:Aria, Helvetica, sans-serif;
        font-size: 18px;
        background: #333;
        padding: 150px 50%;
        color:#999;
        margin-right: 30px;
        margin-bottom: 30px;
        margin-top: 30px;

        text-decoration:none;
        border-radius: 3px;

        -o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
        -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
        -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
        -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
        transition: background 0.3s linear 0s, color 0.3s linear 0s;
        }

    div#menubar2 > a:hover{
        background: #0099CC;
        color:#FFF;
        }


</style>
</head>

<body>


<div id="menubar2">
<a href="#">Home</a>
<br>
<a href="http://store.kidbomb.com">Shop</a>
<br>
<a href="/maintenance">News</a>
<br>
<a href="/maintenance">Contact Us</a>
<br>
<a href="/support-us">Support Us!</a>
<br>
<a href="/maintenance">Requests</a>

    </div>
</body>
</html>

Answer 1

您需要添加

display:inline-block;

到你的＆＃34; div＃menubar＆gt; a＆＃34; CSS

此外，最好使用无序列表进行此类操作。

至于你问题的第二部分，你使用了很多绝对大小（px）而不是百分比，所以你可能需要一些重构来实现这个功能。目前它正在进行一些重构。

Answer 2

嘿，欢迎来到网页设计。你需要使用我们称之为浮点数的东西。

Float example.

http://jsfiddle.net/fhu6v5L4/1

Answer 3

我建议你学习

box-sizing: border-box

通过在添加填充，边框等时防止div变大来解决很多问题。

单独的Div按钮？

3 个答案: