HTML樣式幫助

Question

我需要幫助的HTML造型

這裏的例子：

<div id="hidden" style="display: none;"> 
<label>URL:</label> 
<input type="text" name="url" size="50"/><br/> 
<input type="button" id="button2" value="Update"/> <br/> 
</div> 
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = '';" size="25"/> 

，因爲我們可以看到所有的元素中

<div></div> 

將顯示在點擊按鈕1（他們將隱藏在最初）。當所有的字段出現div（button2）內的另一個按鈕未與按鈕1對齊。

我想要的是當我單擊button按鈕1兩BUTTON2和應對齊..

我怎樣才能做到這一點？

Answer 1

<div id="hidden" style="display: none;"> 
<label>URL:</label> 
<input type="text" name="url" size="50"/><br/> 
</div> 
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display =  '';document.getElementById('button2').style.display=''" size="25"/> 
<input type="button" id="button2" value="Update" style="display:none"/> 

如果你想彼此相鄰的兩個按鈕，但第二個只能在點擊另一個按鈕顯示出來，那麼你就需要包括腳本顯示按鈕onclick。

Answer 2

他們不應該沒有對齊，這可能是該div的風格。

試試這個CSS

#hidden { 
    margin:0; 
    padding:0; 
} 

Answer 3

你是什麼意思「對齊」？它們是否應該水平對齊，即 - 它們應該出現在同一行上？如果是這樣，你需要刪除<br />標記，強制換行符，而不是設置你的div的顯示爲空白，但內聯（如div的默認顯示爲塊）：

<div id="hidden" style="display: none;"> 
    <label>URL:</label> 
    <input type="text" name="url" size="50"/> 
    <input type="button" id="button2" value="Update"/> 
</div> 
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = 'inline';" size="25" /> 

這將產生當你點擊「獲取信息」按鈕，如下：

注意，文本輸入，更新和獲取信息都在一行上！

如果您希望它們全都顯示爲左對齊，則在我測試它時，您提供的代碼看起來很好。一旦點擊獲取信息按鈕，我得到一個顯示器，看起來像這樣：

[INPUT "URL" AREA] 
[Update Button] 
[Get Info] 

如果你不試圖讓你的顯示器水平對齊或左對齊，那麼你在找什麼類型的對齊呢？如果這不是您正在尋找的答案，您可以提供圖表或屏幕截圖嗎？

Answer 4

我普遍認同凱利剛纔提到的。如果您必須保持這種精確的結構並希望水平對齊按鈕，則將float:left;樣式添加到<div></div>和button1可以解決您的問題。

<div id="hidden" style="display:none; float:left;"> 
<label>Url:</label> 
<input type="text" name="url" size="50" /> 
<input type="button" id="button2" value="Update" /> 
</div> 
<input type="button" id="button1" value="Get Info" onClick="document.getElementById('hidden').style.display = '';" style="float:left;" size="25" /> 

希望有幫助！