如何修復按鈕位置而不使用浮動

我有問題需要將按鈕並排正確對齊。我需要在不使用float資源的情況下構建解決方案。看到它：如何修復按鈕位置而不使用浮動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Documento sem título</title> 
     <style type="text/css"> 
      * { 
       margin:0px; 
       padding:0px; 
      } 
      a { 
       display:inline-block; 
       padding: .63em; 
       border:1px solid #ccc; 
       position:relative; 
      } 
      .b2 { 
       padding: .0em 1em .0em 2.1em; 
       text-decoration:none 
      } 
      .icon { 
       position:absolute; 
       width:16px; 
       height:16px; 
       background-color:#999; 
       top:50%; 
       margin-top:-8px; 
       left:2px; 
      } 
     </style> 
    </head> 

    <body> 
     <div style="background-color:#f0f0f0; margin-top:50px; position:relative; height:22px; padding:4px;"> <a href="#"><span class="icon"></span></a> 

      <div style="display:inline-block; width:2px; height:22px; background-color:#666;"></div> <a href="#"><span class="icon"></span></a> 
<a href="#" class="b2"><span class="icon"></span><span>Casa d wqe dde qeasd sd</span></a> 

     </div> 

<h2 style="background:#999"> test</h2> 

<a href="#" class="b2"><span class="icon"></span><span>Casa d wqe dde qeasd sd</span></a> 

    </body> 

</html>

來源

2012-12-12 claudioivp

林不知道你的按鈕，談論和要發生的事情，你期待什麼。 – Ladineko

清理css：將每個內聯樣式放到一個css類中。所以很難修復。 – rekire

第三個按鈕（圖標和文本） - 請參閱：http://s11.postimage.org/b8iytw143/Untitled_5.png – claudioivp

試試這個位置：關於使用一個無序列表項

div .b2 { 
    top:-6px; 
}

Demo

來源

2012-12-12 18:42:33 rekire

這不是一個好的解決方案，我認爲，因爲我需要在所有使用按鈕。 – claudioivp

你的例子也很混亂。到目前爲止，我認爲這個黑客沒有問題。 – rekire

我需要複製此解決方案：primefaces.org/showcase/ui/commandButton.jsf – claudioivp

什麼？看到這個的jsfiddle：jsFiddle

你把它用這樣的CSS屬性是內聯：

li { 
list-style:none; 
display:inline; 
}

來源

2012-12-12 18:44:31 user1470118

ul/li超出了這個範圍，因爲這只是一個按鈕。 – claudioivp

你是什麼意思？你仍然是一個按鈕......你只是使用ul/li來對齊 – user1470118

嗯..我覺得很奇怪，只有一個按鈕。在某些情況下，我需要將文本與按鈕混合... – claudioivp

如何修復按鈕位置而不使用浮動

回答

相關問題