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>

这是一张图片：

enter image description here

Answer 1

更改您的CSS

.buttons{
border-width: 2px;
border-color: black;
border-style: solid; 
border-radius: 10px 0px 0px 10px;
padding:5px;
margin:5px;
border-right-color: #dcdcdc;
background-color: #dcdcdc;
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: 5px;
max-width: 8%;
min-width: 5%;
min-height: 3%;
float:left;
display: inline-block;
}

Working Fiddle

Answer 2

CSS：

.buttons{
border-width: 2px;
border-color: black;
border-style: solid; 
border-radius: 10px 0px 0px 10px;
padding:5px;
margin:3px;
border-right-color: #dcdcdc;
background-color: #dcdcdc;
max-width: 8%;
min-width: 5%;
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: 3px;
max-width: 8%;
min-width: 5%;
min-height: 3%;
display: inline-block;
}

它会尝试这个。

Answer 3

我重新安排了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/

包含div和div的CSS？

3 个答案: