html - 带有 div 和 div 的 CSS 在盒子上？

Question

我找不到我的 CSS 中的错误。我要创建的两个按钮应该有 5px 的边距。但是按钮太远了。我的错误在哪里？

.box{
    background-color: #dcdcdc;
    border:;
    border-radius: 15px;
    padding: 5px;
    margin-right:5%;
    margin-left:auto;
    margin-top: 10%;
    min-width: 50%;
    max-height: 60%;
    overflow:auto;
    display: inline-block;

}

.buttons{
    border-width: 2px;
    border-color: black;
    border-style: solid; 
    border-radius: 10px 0px 0px 10px;
    padding:5px;
    border-right-color: #dcdcdc;
    background-color: #dcdcdc;
    margin-top: 11%;
    margin-left: 30%;
    max-width: 8%;
    min-width: 5%;
    float:left;
    min-height: 3%;
    display: inline-block;
}

.buttons2{
    border-width: 2px;
    border-color: black;
    border-style: solid; 
    border-radius: 10px 0px 0px 10px;
    padding:5px;
    border-right-color: #dcdcdc;
    background-color: #dcdcdc;
    margin-top: 5px;
    margin-left: 30%;
    max-width: 8%;
    min-width: 5%;
    min-height: 3%;
    float:left;
    display: inline-block;
}

谁能帮帮我？ ;)感谢您的关注。

编辑:html 不是很有趣:

<div class="box">
<p><b>Übersicht:</b></p>
<p>Hallo $username! Welches Quiz möchtest du heute starten?</p>
<p>Kategorie:</p>
<p>Übung:</p>

</div>

<div class="buttons">
Test
</div>

<div class="buttons2">
Test2
</div>

这是一张图片:

Answer 1

我重新安排了您的 HTML，将按钮放在第一位。我给了他们一个名为 .buttonContainer 的容器，它漂浮在 .box 上。我给了两个按钮相同的类。

HTML

<div class="buttonContainer" >
    <div class="buttons">
        Test
    </div>

    <div class="buttons">
        Test2
    </div>
</div>

<div class="box">
    <p><b>Übersicht:</b></p>
    <p>Hallo $username! Welches Quiz möchtest du heute starten?</p>
    <p>Kategorie:</p>
    <p>Übung:</p>
</div>

CSS

.box{
    padding:5px;
    background-color: #dcdcdc;  
    border-radius: 15px;
    min-width: 50%;
    max-height: 60%;
    overflow:auto;
    display:inline-block;
    float:left;
}

.buttons{    
    padding:5px;
    border-width: 2px;
    border-color: black;
    border-style: solid; 
    border-radius: 10px 0px 0px 10px;
    border-right-color: #dcdcdc;
    background-color: #dcdcdc;
    display:block;
    width:auto;
    margin-top:15px;
}

.buttonContainer{
    float:left;
}

工作示例: http://jsfiddle.net/L5gmk/3/