HTML格式对齐框中的按钮

我一直在刷新HTML，CSS和JavaScript，通过在一个我认为会有用的小项目上工作。这是一个基于我家里食谱的配方查找器。无论如何，我的问题是排列html页面中的一些元素。
有问题的HTML页面的部分是：HTML格式对齐框中的按钮

<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>

我的CSS文件：

html, body { 
    height: 100%; 
    min-height: 100%; 
} 
select{ 
    width: 300px; 
}

因为所有的元素都在一个表单标签都内嵌显示。我尝试将按钮放在一个表格中，但表格格式将第一个选择放在一行上，表格放在一个新行上，第二个选择放在一个新行上。
这里是我的格式看起来像现在：
这里就是我想要它看起来像（全靠油漆）
我敢肯定，我可以找出如何中心的按钮垂直形式，但如果你能帮我解决这个问题，那我真的很感激！

来源

2016-10-01 Steve Pulse

预计您至少会尝试为自己编写代码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您尝试过的以及为什么它不起作用。 –

尝试更改HTML。添加包装divs和其他布局。 –

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; 
}

它是由你来调整填充和利润率将留下它在你的欲望。

来源

2016-10-01 18:07:34 Dez

这非常有帮助。谢谢。我一直试图弄清楚这一点现在。 –

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

反正只是对于中间部分，您可以尝试的div你的表里面的TD这样的：

<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>

干杯！

来源

2016-10-01 18:05:35

HTML格式对齐框中的按钮

回答

相关问题