Q

強制按鈕元素佈局像div

2011-12-01 63 views 3 likes

3

我想用按鈕元素來替換div元素，以提高可訪問性，但我需要按鈕來佈局像divs用來做。（注意這隻需要在webkit中工作）強制按鈕元素佈局像div

div取父容器的寬度，而按鈕僅佔用顯示其內容所需的位置。

我該如何改變這種情況？

我不想設置類似width：100％的東西，因爲如果您在容器中使用多於一個按鈕並顯示：webkit-box div很好地佈局以使用剩餘空間。

這裏是一個小例如：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>button test</title> 
     <style> 
      .mybutton{ 
       display: block; 
       border: 1px solid red; 
       -webkit-appearance: none; 
       -webkit-border-radius: 6px; 
       background-color: transparent; 
       -webkit-gradient(linear,left bottom,left top,color-stop(0, #A8ACB9),color-stop(1, #eee)); 
       text-align: center; 
      } 

     </style> 
    </head> 
    <body> 


     <div class="mybutton">Div Button</div> 

     <button class="mybutton">Button</button> 

    </body> 
</html>

2011-12-01 Daniel Kurka

A

回答

3

如果您的按鈕與「顯示：-webkit-箱」的容器，然後只需添加「-webkit-箱-flex：1「到該容器內的按鈕（或任何元素）。這解決了它。

http://jsfiddle.net/y53VT/

2011-12-01 16:53:28

+0

我不能添加容器。我需要按鈕在我的小示例中佈局相同，而不更改dom結構 –

+0

似乎不改變DOM來添加外部容器是不可能的。一直在修補它。按鈕元素會縮小以適應其內容，除非它給出了明確的維度。 –

0

也許你應該去更具體。嘗試button.mybutton {在您的CSS ...

2011-12-01 09:49:22 Michiel

+0

樣式應用得很好。所以匹配更具體不會改變任何東西。無論如何感謝:) –

1

我不知道爲什麼你有你的-webkit規則後向斜線。刪除它們，它們的行爲與div相同，但某些需要重新設置的繼承樣式除外。

你可以看到按鈕和輸入與WebKit的盒子在這裏很好打的一個例子： http://jsfiddle.net/dt592/

2011-12-01 16:02:41 Duopixel

+0

與周圍div設置顯示：-webkit-box。它工作正常，沒有它，雖然他們呈現不同。我不能添加周圍的div。 –

+0

-webkit-box已添加到父容器中，而不是添加到靈活的元素中，請參閱http://www.html5rocks.com/en/tutorials/flexbox/quick/ – Duopixel

+0

是的，我知道，但在我的情況下，我可以't不改變父母的顯示 –

相關問題