Question

我通过处理一个我觉得有用的小项目来刷新html，css和javascript。这是一个食谱查找器，基于我在家里的食谱。无论如何，我的问题是关于排列html页面中的一些元素有问题的html页面部分是：

{name}

我的css文件：

<form>
<select size=10 id="first"></select>
<button type="button" id="addAll" onclick="rightAll()">
    Add All
</button>
<button type="button" id="removeAll" onclick="leftAll()">
    Remove All
</button>
<button type="button" id="add" onclick="right()">
    >>
</button>
<button type="button" id="remove" onclick="left()">
    &lt;&lt;
</button>
<select size=10 id="second"></select>
</form>

因为所有元素都在表单标记中，所以它们都是内联的。我尝试将按钮放在一个表格中，但是表格格式化将第一个选择放在一行上，表格放在一个新行上，第二个选择放在一个新行上。
以下是我的格式现在的样子：
这就是我想要它的样子（感谢油漆）
我确定我可以弄清楚如何在表格中垂直居中按钮，但如果你能帮我解决这个问题，那么我会非常感激！

Answer 1

HTML

<form>
    <div id="sel1">
        <select size=10 id="first"></select>
    </div>
    <div id="buttons">
        <div id="buttons1">
             <button type="button" id="addAll" onclick="rightAll()">
             Add All
             </button>
             <button type="button" id="removeAll" onclick="leftAll()">
             Remove All
             </button>
        </div>
        <div id="buttons2">
             <button type="button" id="add" onclick="right()">
             >>
             </button>
             <button type="button" id="remove" onclick="left()">
             &lt;&lt;
             </button>
        </div>
     </div>
     <div id="sel2">
         <select size=10 id="second"></select>
     </div>
</form>

CSS

html, body {
  height: 100%;
  min-height: 100%;
}
select{
    width: 300px;
}
div {
  float: left;
}  
#buttons1, #buttons2 {
  float: none;
  text-align: center;
}

您可以根据自己的需要调整填充和边距。

Answer 2

你应该使用div如果你想进一步扩展你的设计，表没有直接响应和固定布局的类型与凌乱的代码，你可以尝试使用div和其他css属性。

无论如何只是为了那个中间部分，你可以在你的桌子里尝试div，如下所示：

<div style="width:100%;">
<div style="width:50%;float:left;">
<button type="button" id="addAll" onclick="rightAll()">
    Add All
</button>
<div>
<div style="width:50%;float:right;">
<button type="button" id="removeAll" onclick="leftAll()">
    Remove All
</button>
<div>
<div style="clear:both;"></div>
</div>

<div style="width:100%;">
<div style="width:50%;float:left;">
<button type="button" id="add" onclick="right()">
    >>
</button>
<div>
<div style="width:50%;float:right;">
<button type="button" id="remove" onclick="left()">
    &lt;&lt;
</button>
<div>
<div style="clear:both;"></div>
</div>

干杯！

HTML格式化框中的对齐按钮

2 个答案: