Html 单独的Div按钮？_Html_Css_Button

Html 单独的Div按钮？

html css button

Html 单独的Div按钮？,html,css,button,Html,Css,Button,我试着让按钮不在彼此的上面！我很确定有一个简单的属性需要放到CSS代码中，但我似乎无法理解它！还有，有没有一种方法可以让按钮填满整个屏幕，而不出现较低的滚动条！我试图在填充中使用100%的部分，但这使得页面非常大 <style> div#menubar2 > a{ font-family:Aria, Helvetica, sans-serif; font-size: 18px; background: #333;

我试着让按钮不在彼此的上面！我很确定有一个简单的属性需要放到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>


分区2>a{
字体系列：咏叹调，Helvetica，无衬线；
字号：18px；
背景：#333；
填充：150px 50%；
颜色：#999；
右边距：30px；
边缘底部：30px；
边缘顶部：30px；
文字装饰：无；
边界半径：3px；
-o过渡：背景0.3s线性0s，颜色0.3s线性0s；
-webkit过渡：背景0.3s线性0s，颜色0.3s线性0s；
-ms转换：背景0.3s线性0s，颜色0.3s线性0s；
-moz过渡：背景0.3s线性0s，颜色0.3s线性0s；
过渡：背景0.3s线性0s，颜色0.3s线性0s；
}
div#menubar2>a:悬停{
背景#0099CC；
颜色：#FFF；
}

您需要添加

display:inline-block;

到您的“div#menubar>a”css

此外，对于这类事情使用无序列表也是一种很好的做法

至于问题的第二部分，您使用了大量的绝对大小（px）而不是百分比，因此您可能需要一些重构来实现这一点。就目前而言，需要进行一些重构。

嘿，巴德，欢迎来到网页设计。你需要使用我们所说的浮动

Float example.

我建议你学会使用

box-sizing: border-box

当您添加填充物、边框等时，它可以防止div变大，从而解决许多问题。

非常感谢！你所有的建议都帮了我大忙，而且显示：inline block；工作得很好！感谢您花时间和精力回复！：）