我想在 Input 的顶部放置 1 个标签,右侧有两个居中按钮(在 div 内)。
目前我的代码不灵活,我无法在任何地方轻松使用我的类 在我的网页上,因为它强烈依赖于 #.bu-container 高度,它比它应该的大得多。此外,在不同浏览器上调整更多尺寸时,我不确定是否会有好的结果。
预先感谢您的回复,
这是我的错误代码:
#position {
height: 500px;
}
.bu-container {
margin: 10px;
display: block;
float: left;
height: 50px;
width: 400px;
overflow: hidden;
}
.bu-container input {
float: left;
}
.bu-container .bu {
float: right;
top: 0px;
right: 50px;
padding: 1px;
}
.bu-container button {
height: 10px;
display: block;
}
<div id="Position">
<span class="bu-container">
<span class="bu"> <button></button> <button></button> </span>
<label>Height</label>
<input id="LHeight" min="0" type="number" value="">
</span>
<span class="bu-container">
<span class="bu"> <button></button> <button></button> </span>
<label>Width</label>
<input id="LWidth" min="0" type="number" value="">
</span>
<span class="bu-container">
<span class="bu"> <button></button> <button></button> </span>
<label>X</label>
<input id="x" min="0" type="number" value="">
</span>
<span class="bu-container">
<span class="bu"> <button></button> <button></button> </span>
<label>Y</label>
<input id="y" min="0" type="number" value="">
</span>
</div>
最佳答案
检查一下....
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
#position {
height: 500px;
}
.row-container {
display: inline-block;
text-align: justify;
margin: 0px auto;
width: 100%;
margin-top:10px;
margin-bottom:10px;
border:5px solid #ccc;
padding:10px;
}
.input-text-container {
display: inline-block;
width: 50%;
}
.input-text-container input {
width: 100%;
}
.button-container {
width: 49%;
display: inline-block;
margin: 0px auto;
text-align:center;
}
.button-container button {
}
<div id="Position">
<div class="row-container">
<div class="input-text-container">
<label for="LHeight">Height</label>
<input id="LHeight" min="0" type="number" value="">
</div>
<div class="button-container">
<div>
<button>button1</button>
</div>
<div >
<button>button2</button>
</div>
</div>
</div>
</div>
关于html - 在顶部放置 1 个标签,在底部放置 1 个输入,在左侧放置 2 个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30699880/