我已经开始为了好玩而学习一些 html/css/javascript,但我遇到了一个问题。 在 html 中,我想在同一行显示一些 div,但我不知道为什么我不能这样做。
我要显示在同一行和同一高度的div是“按钮”和“文本”对
这是我的代码!
html {
background-color: #e6eeff;
font-family: Verdana;
}
* {
border: 1px solid black;
}
#bgCal {
background-color: #004466;
color: white;
width: 500px;
margin: 0px auto;
border-radius: 10px;
padding: 10px 10px 10px 10px;
}
#display {
background-color: #d7d7c1;
color: black;
text-align: right;
width: 400px;
height: 100px;
font-size: 30px;
margin: 10px auto;
line-height: 100px;
border-radius: 5px;
}
#numberTot {
background-color: #d7d7c1;
vertical-align: middle;
line-height: normal;
margin-right: 5px;
}
.button {
background-color: #0099e6;
width: 150px;
height: 60px;
border-radius: 5px;
margin: 10px 50px;
display: inline-block;
text-align: center;
overflow: hidden;
}
.text {
background-color: #004466;
color: white;
height: 60px;
width: 180px;
margin: 10px 50px 10px 0px;
display: inline-block;
text-align: center;
font-size: 12px;
overflow: hidden;
}
<div id="bgCal">
<div id="display">
<span id="numberTot"> 0 </span>
</div>
<button class="button" onclick="numberClick(1)">+</button>
<div class="text">
Every click increase of 1 the total number.
</div>
<br>
<button class="button" onclick="buyStudent()">
Buy Student
<br>Cost: <span id="studentLUCost">10</span>
<br>Students owned: <span id="studentLevel">0</span>
</button>
<div class="text">
A student can click instead of yourself, but they are slower.
<br>
<span id="studentProd">0</span> num/sec
</div>
</div>
最佳答案
正如评论中的 Leo the lion
所建议的那样,您可以简单地将 float:left
和 clear:both
放在您的 上。按钮
类以获得所需的效果。
Clear
用于防止 float 元素位于指定元素的旁边,在本例中为 both
左侧和右侧,并将它们推到下方。有一个很好的 QA 关于它 here如果你想了解更多。
html {
background-color: #e6eeff;
font-family: Verdana;
}
* {
border: 1px solid black;
}
#bgCal {
background-color: #004466;
color: white;
width: 500px;
margin: 0px auto;
border-radius: 10px;
padding: 10px 10px 10px 10px;
}
#display {
background-color: #d7d7c1;
color: black;
text-align: right;
width: 400px;
height: 100px;
font-size: 30px;
margin: 10px auto;
line-height: 100px;
border-radius: 5px;
}
#numberTot {
background-color: #d7d7c1;
vertical-align: middle;
line-height: normal;
margin-right: 5px;
}
.button {
background-color: #0099e6;
width: 150px;
height: 60px;
border-radius: 5px;
margin: 10px 50px;
display: inline-block;
text-align: center;
overflow: hidden;
float:left;
clear:both;
}
.text {
background-color: #004466;
color: white;
height: 60px;
width: 180px;
margin: 10px 50px 10px 0px;
display: inline-block;
text-align: center;
font-size: 12px;
overflow: hidden;
}
<div id="bgCal">
<div id="display">
<span id="numberTot"> 0 </span>
</div>
<button class="button" onclick="numberClick(1)">+</button>
<div class="text">
Every click increase of 1 the total number.
</div>
<br>
<button class="button" onclick="buyStudent()">
Buy Student
<br>
Cost: <span id="studentLUCost">10</span>
<br>
Students owned: <span id="studentLevel">0</span>
</button>
<div class="text">
A student can click instead of yourself, but they are slower.
<br>
<span id="studentProd">0</span> num/sec
</div>
</div>
关于Html/css 在同一行显示两个 div 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38975353/