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格式對齊框中的按鈕

回答

相關問題