如何強制複選框和文本在同一行上？

如何強制複選框和以下文本出現在同一行上？在下面的HTML中，我只想要標籤和輸入之間的分界線，而不是輸入和標籤之間。如何強制複選框和文本在同一行上？

<p><fieldset> 
    <input type="checkbox" id="a"> 
    <label for="a">a</label> 
    <input type="checkbox" id="b"> 
    <!-- depending on width, a linebreak can occur here. --> 
    <label for="b">b</label> 
    <input type="checkbox" id="c"> 
    <label for="c">c</label> 
</fieldset></p>

澄清：如果字段集/ p是不夠寬的所有元素，而不是：

[] a [] b [] 
c [] d [] e

我想：

[] a [] b 
[] c [] d 
[] e

來源

2012-05-06 Andreas

爲什麼不把他們之間的div？ –

我不知道，你能澄清你的意思嗎？ – Andreas

如果我寫了一個段落，例如'

嗨，我叫Andreas

'，我不會在那裏手動換行，而是期待瀏覽器這樣做。不過，我不希望瀏覽器在'Andreas'的中間插入一個換行符，這正是我想要阻止的。也就是說，我不知道複選框標籤對的數量或換行符預先適合的位置。 – Andreas

它不會打破，如果你將每個項目包裝在一個div。看看下面的鏈接我的小提琴。我將字段的寬度設置爲125px，並使每個項目寬度爲50px。你會看到標籤和複選框在一條新線上並排放置，並且不會中斷。

<fieldset> 
<div class="item"> 
    <input type="checkbox" id="a"> 
    <label for="a">a</label> 
</div> 
<div class="item"> 
    <input type="checkbox" id="b"> 
<!-- depending on width, a linebreak can occur here. --> 
    <label for="b">bgf bh fhg fdg hg dg gfh dfgh</label> 
</div> 
<div class="item"> 
    <input type="checkbox" id="c"> 
    <label for="c">c</label> 
</div> 
</fieldset>

http://jsfiddle.net/t5dwp7pg/1/

來源

2012-05-06 10:42:01

嘗試讓您的標籤比單個字母更大！它不適用於更長的標籤。 – joedotnot

試試這個CSS：

label { 
    display: inline-block; 
}

來源

2012-05-06 08:39:45

複選框和標籤之間仍然可以出現換行符。我會編輯我的問題來澄清。 – Andreas

將每個複選框和標籤對包裝在一個設置了顯示的div中：嵌入塊 –

IE7不支持嵌入塊 –

put a div wrapper with WIDTH : 

    <p><fieldset style="width:60px;"> 
    <div style="border:solid 1px red;width:80px;"> 
    <input type="checkbox" id="a"> 
    <label for="a">a</label> 
    <input type="checkbox" id="b"> 

    <label for="b">b</label> 
    </div> 

    <input type="checkbox" id="c"> 
    <label for="c">c</label> 
</fieldset></p>

的名稱可能是「約翰·溫斯頓·列儂小野」，這是很長...所以你想做什麼？（你永遠不知道長度）...你可以做一個函數，包裝後x個字符，如：「約翰溫斯頓Ø....」

來源

2012-05-06 08:48:21

這假設我事先知道p/fieldset大小和標籤的長度。 – Andreas

@Andreas讓我們說話極端，名字可以是「約翰·溫斯頓ono lennon」，這個名字很長......那麼你想做什麼？你可以做一個函數，在x字符之後換行，如：「john winston o ....」 –

單個複選框標籤對總是適合的。我現在用布倫特的評論解決了它。 – Andreas

試試這個。以下考慮複選框和標籤作爲一個獨特的元素：

<style> 
    .item {white-space: nowrap;display:inline } 
</style> 
<fieldset> 
<div class="item"> 
    <input type="checkbox" id="a"> 
    <label for="a">aaaaaaaaaaaa aaaa a a a a a a aaaaaaaaaaaaa</label> 
</div> 
<div class="item"> 
    <input type="checkbox" id="b"> 
<!-- depending on width, a linebreak NEVER occurs here. --> 
    <label for="b">bbbbbbbbbbbb bbbbbbbbbbbbbbbbb b b b b bb</label> 
</div> 
<div class="item"> 
    <input type="checkbox" id="c"> 
    <label for="c">ccccc c c c c ccccccccccccccc cccc</label> 
</div> 
</fieldset>

來源

2012-11-13 11:15:06 ManuelConde

另一種方法是使用CSS僅僅做到這一點：

input[type='checkbox'] { 
    float: left; 
    width: 20px; 
} 
input[type='checkbox'] + label { 
    display: block; 
    width: 30px; 
}

注意，這迫使每個複選框，其標籤上一個單獨的線，而只有在溢出時才這樣做。

來源

2015-07-02 02:33:54

感謝這！ – Fattie

如何強制複選框和文本在同一行上？

回答

相關問題