html - 在顶部放置 1 个标签,在底部放置 1 个输入,在左侧放置 2 个按钮

标签 html css browser

我想在 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/

相关文章:

html - CSS 新手 - 过渡不起作用

html - CSS 背景在 mac osx 浏览器中不可见,但在 windows 浏览器中可见

html - 悬停时更改字体大小移动其他div

JavaScript 全局对象和全局作用域

html - 如何在 html 下拉菜单中将部分文本对齐到右侧以标记子下拉菜单

javascript - 仅使用 javascript 创建径向菜单

html - CSS div 和 :hover positions

javascript - 如果 Facebook 评论为 0,则 Conceal div

css - 谷歌浏览器逆时针旋转但应该是顺时针

html - 如何调整手机浏览器的纵横比