CSS需要內聯元素出現在{display：block; }元素

我想介紹旁邊的另一個元素的複選框。問題是，a元素已被CSS製作爲「塊」，因此它出現在正確的高度和寬度。作爲一個障礙，我不能簡單地在旁邊放置另一個元素，並希望它顯示在那裏 - 它顯示在它下面。CSS需要內聯元素出現在{display：block; }元素

一個自包含的示例如下所示。

<html> 
<head> 
<style type='text/css'> 
/* I don't have control over this */ 
a.btn { 
     background-color: #B35905; 
     color: #E6D389; 
     text-decoration: none; 
     font-weight: bold; 
     text-align: center; 
     display: block; 
     border: none; 
     cursor: pointer; 
} 
.normal{ 
    line-height: 20px; 
    font-size: 12px; 
    height: 20px; 
    width: 125px; 
    padding: 0px; 
    margin: 0px; 
} 
</style> 
</head> 
<body> 

<!-- I have some control over this --> 
<a class="btn normal">Push Me</a><input type="checkbox"> 
<br> 
<a class="btn normal">Push Me Too</a> 
</body> 
</html>

所以，我正在尋找的是立即出現在元素的右邊的複選框，而無需完全弄髒的按鈕的樣式。使用按鈕的（已知）大小絕對定位複選框似乎是錯誤和髒的。

對此提出建議？

來源

2009-11-13 Clinton Pierce

如果您必須保留塊元素的錨點，請將其設置爲float: left。不要忘記添加

<div style="clear: both;"></div>

複選框後。

來源

2009-11-13 16:55:31

完美。謝謝。 – 2009-11-13 17:36:12

或只是將
更改爲
– jessegavin 2009-11-13 17:37:14

-1

獲取按鈕旁邊的複選框，同時保留按鈕的塊樣式的最簡單的方法是將按鈕的display屬性設置爲inline-block。令人驚訝的是，在這種情況下使用display: inline-block將適用於所有現代瀏覽器和IE 6以及更高版本。 inline-block是一個鮮爲人知的但非常有用的屬性。

來源

2009-11-13 16:56:04

你能用這樣的訪問來做這樣的事嗎？

<div style="width: 150px;"> 
    <input type="checkbox" style="float: right;"> 
    <a class="btn normal">Push Me</a> 
</div>

來源

2009-11-13 16:57:26 Chris

添加在兩個CSS類

.floatingButton{ 
    float:left; 
} 
.aCheckbox { 
    xclear:left; 
}

然後

<a class="btn normal floatingButton">Push Me</a><input class="aCheckbox" type="checkbox"> 
     <br> 
     <a class="btn normal">Push Me Too</a>

應該做的伎倆

來源

2009-11-13 17:00:25 Zoidberg

只是應用float: left到第一a標籤。

來源

2009-11-13 17:00:52 BitDrink

<a class="btn normal" style="float: left;">Push Me</a><input type="checkbox"> 
<br style="clear: both;"> 
<a class="btn normal">Push Me Too</a>

來源

2009-11-13 17:06:35 Aaron

CSS需要內聯元素出現在{display：block; }元素

回答

相關問題