如何將多個按鈕水平放置到顯示大小？

我有一些困難集中在div中包含圖像的一些div。我希望將按鈕添加到HTML，並讓jQuery自動將它們居中，但我無法完全理解它。如何將多個按鈕水平放置到顯示大小？

我有一個小提琴在這裏設置：http://jsfiddle.net/uucp/m3UmA/

我原來的計劃是採取容器通過按鈕的＃大小（名爲「標籤」）除（的「標籤」類別上的號碼頁面），然後將每個選項卡div的寬度設置爲該值。

我必須缺少一些基本的：默認填充或邊距？困惑，困惑等，任何幫助將不勝感激。

HTML：

<div id="tabs" class="tabs"> 
    <div id="tab_chat" class="tab"> 
     <img class="tab_button" id="tab_chat_img" src="http://hanford.org/users/uucp/jsfiddle/daychat.png"> 
    </div> 
    <div id="tab_users" class="tab"> 
     <img src="http://hanford.org/users/uucp/jsfiddle/dayusers.png"> 
    </div> 
    <div id="tab_images" class="tab"> 
     <img src="http://hanford.org/users/uucp/jsfiddle/dayimages.png"> 
    </div> 
    <div id="tab_night" class="tab"> 
     <img src="http://hanford.org/users/uucp/jsfiddle/daynight.png"> 
    </div> 
    <div id="tab_refresh" class="tab"> 
     <img src="http://hanford.org/users/uucp/jsfiddle/dayrefresh.png"> 
    </div> 
    <div id="tab_settings" class="tab"> 
     <img src="http://hanford.org/users/uucp/jsfiddle/daysettings.png"> 
    </div> 
</div> 
<p> 
    <div id="console"></div> 
</p>

CSS：

.tabs { 
    height: 34px; 
    padding-top: 1px; 
    padding-bottom: 0px; 
    background-color: #000; 
} 
.tab { 
    text-align: center; 
    border: 0; 
    display: inline-block; 
    color: #fff; 
} 
div.tab_button { 
    border: 0; 
    width: 32px; 
    height: 32px; 
}

的JavaScript：

var tabCount = $(".tab").size(); 
var offset = 24; 
var tabWidth = Math.floor(($("#tabs").width()/tabCount)); 
$('.tab').each(

function (i, tab) { 
    $(tab).css("width", tabWidth + "px"); 
    $("#console").append("tabCount=" + tabCount + " tabWidth=" + tabWidth + " tabs.width=" + $("#tabs").width() + "<br/>"); 
});

謝謝。

來源

2013-08-17 uucp

您可以使用CSS處理它，使用text-align: center屬性。

在這裏添加它。

.tabs { 
height: 34px; 
padding-top: 1px; 
padding-bottom: 0px; 
background-color: #000; 
text-align: center; 
}

入住這JSFiddle

來源

2013-08-17 00:54:34 Praveen

如果你想要一個負責任的解決方案，你可以這樣做：DEMO

這個類添加到容器div：合理調整。

只需添加這些CSS規則：

.justified-adjustment { text-align: justify; } 

.justified-adjustment > * { 
    display: inline-block; 
    vertical-align: middle; 
} 

.justified-adjustment::after { 
    content: ""; 
    width: 100%; 
    display: inline-block; 
}

凡標記爲：

<div class="tabs-container justified-adjustment"> 
    <img src="#" alt="Image 1" /> 
    <img src="#" alt="Image 2" /> 
    <img src="#" alt="Image 3" /> 
</div>

嘗試調整窗口，你會看到這是一個敏感的解決方案。

來源

2013-08-17 00:57:28 leoMestizo

您可以使用固定表格佈局實現您想要的功能。只需按照您的喜好將一行和多列列入表格，然後將表格顯示爲CSS：。這將爲你做所有的計算，並使表格列等寬。顯然，表格還需要100％的寬度，並且您還需要將圖像放在表格單元格的中間，因此我們需要單元格上的text-align: center。

就是這樣。繼承人小提琴：Link

來源

2013-08-17 01:26:54 ThatWeirdo

如何將多個按鈕水平放置到顯示大小？

回答

相關問題