顯示：inline-block的不工作

我做了display: inline-block工作here。正如你所看到的，複選框和文本水平對齊。顯示：inline-block的不工作

但它並不在此fiddle工作：

其實我有three problems在這裏解決：

使該複選框和文本：內嵌的複選框。
在右側的內容，我有一個按鈕Swing System，我希望它是正確對齊。
正如你所看到的，我有left和right內容。它們大多數是寬度爲50%，我希望它們居中。目前不是。

代碼片段：

HTML

<li> 
     <input type="checkbox" class="swing_checkbox" id="swing_equipment" /> <span id="swing_label_small">Swing Equipment Also</span> 
    </li>

CSS：

#swing_label_small, #swing_equipment { 
    display: inline-block; 
    font-size: 0.8em; 
}

來源

2014-03-14 JunM

使複選框和文本。

複選框有width設置爲90%通過該CSS聲明...

input { 
    position: relative; 
    width: 90%; 
}

變化，爲...

input[type=text] { 
    position: relative; 
    width: 90%; 
}

在右側的內容，我有一個按鈕迴轉系統，我希望它是右對齊。

我注意到的第一件事是你在ul內放置一個按鈕，它不會驗證爲正確的html。我建議你將其移出ul，因爲它在語義上不正確。但隨着你...添加text-align:right到ul，然後加入text-align:right孩子li應該工作什麼工作......

#right_content{ 
    text-align:right; 
} 
ul#right_content > li { 
    border: 0px solid green; 
    margin: 0; 
    width: 100%; 
    position: relative; 
    text-align:left; 
}

正如你所看到的，我左，右內容。它們大多是寬度的50％，我希望它們能夠居中。目前不是。

我不太清楚你的意思......請澄清，所以我可以修改我的答案

來源

2014-03-14 02:26:45 Leo

謝謝利奧。我已經更新了我的小提琴第三個問題。我添加了一個紅色框。該框內的內容不以紅色框爲中心 - http://jsfiddle.net/Pqr4e/32/ – JunM

@JunM這是因爲'ul'元素有一個默認的填充。刪除。 http://jsfiddle.net/XvGK3/ –

@JoshCrozier - 現在正在工作。謝謝大家的幫助。 – JunM

1）對於複選框和文本的問題：適用width: auto;的複選框：

.swing_checkbox { 
    width:auto; 
}

下面是給該複選框的90％的寬度，這就是爲什麼該文本被下推到下一行。

input { 
    position: relative; 
    width: 90%; 
}

2）像這樣的事情會的工作，我在這裏使用內嵌樣式，因爲我懶。隨時收拾你自己。

<ul class="content" id="right_content"> 
    <li style="text-align: right;"> <button type="button" class="swing_btn">Swing System</button></li>   
    ... 
    ... 
    ...

3）使用容器上text-align:center;，然後應用text-align:left;到它的內部元件。這將以百分比定義的寬度居中塊級元素。但是，如果您有興趣研究它們，還有其他方法可以做到這一點。

.swing_wrapper { 
    text-align: center; 
} 

ul.content,.swing_title, { 
    text-align: left; 
}

4）你也應該看看一些調試工具，如Firebug，它使調試問題這樣輕鬆了許多與它的檢測工具。與複選框搖擺設備同時在線：

來源

2014-03-14 02:19:55 Bob

謝謝man.I沒有意識到'checkbox'也是'input'。 – JunM

這是我所做的更改。

對於1）添加CSS複選框，因爲你使所有輸入widht：90％;

input[type="checkbox"]{ 
    width:auto; 
}

對於2）添加一個div字段，以明確兩個目的。然後讓按鈕正確地浮動。

HTML：

<button type="button" class="swing_btn">Swing System</button> 
<div class="clear"></div>

CSS：

.clear{ clear:both;} 
#right_content > button 
{ 
    float:right;  
}

3）當你正在使用UL中的結構。有用於ul的填充。

刪除破壞結構的內部填充填充。

ul li ul { 
    padding:0px; 
}

給了表的餘量，使其中心：

.swing_grid, tr, td { 
    border: 1px solid gray; 
    border-collapse: collapse; 
    margin: 0 auto; 
}

終於讓內容居中：

ul.content { 
    border: 0px solid gray; 
    box-sizing: border-box; 
    width: 49%; 
    position: relative; 
    list-style-type: none; 
    display: inline-block; 
    vertical-align: top; 
    text-align: center; 
}

這是我的工作FIDDLE。

來源

2014-03-14 02:31:24 Kooki3

顯示：inline-block的不工作

回答

相關問題