難度排列在複選框CSS

我有困難，排隊我的複選框（下周）與我的形式（即2.日期&時間）的其他部分。除此之外，我似乎無法將文本顯示在複選框的右側，它總是顯示在下方。我該如何解決這個問題？難度排列在複選框CSS

代碼

label { 
    width: 8em; 
    float: left; 
    text-align: left; 
    display: block; 
} 
select { 
    width: 70%; 
} 
.slider, .slider2 { 
    width: 100%; 
    margin-top: 5px; 
} 
input { 
    border: none; 
    font-family: 'Segoe UI', arial, helvetica, sans-serif !important; 
    font-size: 14px; 
    padding: 0px; 
    background-color: transparent; 
} 
.clear { 
    clear: both; 
} 
.w50 { 
    width: 50%; 
} 
.weeks fieldset { 
    border: none; 
    outline: none; 
} 
.weeks fieldset > legend { 
    float: left; 
    margin-right: 3.8em; 
} 
.weeks fieldset .item { 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
} 
.weeks fieldset label { 
    float: none; 
    display: inline-block; 
    vertical-align: top; 
} 
.left { 
    float: left; 
    outline: none; 
} 
fieldset span { 
    display: inline-block; 
    width: 12em; 
} 
.weeks fieldset span { 
    display: inline-block; 
    width: 2em; 
} 
.request_heading { 
    font-size: 18px; 
    font-weight: bold; 
} 
.page { 
    padding-left: 20px; 
    font-family: 'Segoe UI', arial, helvetica, sans-serif; 
    padding-right: 20px; 
    font-size: 14px; 
}

來源

2013-03-13 methuselah

@John that would not be Valid。 – PointedEars 2013-03-13 09:49:03

O，他正在使用float ... tut：/ – John 2013-03-13 09:51:11

你的跨度是2em的（你似乎已經覆蓋就行了你12em寬度寬度下同），其中爲您的標籤都是8em這就是爲什麼它們被包裹到下一行，如果你改變你的

，如果你改變你的跨度來3.5em和你的標籤1.5em你會得到如下：

.weeks fieldset label {width:1.5em} 
.weeks fieldset span {width:3em;}

http://jsfiddle.net/4YMaQ/6/

，如果你改變你的傳奇你的右邊界，你可以在一個適合一行五：

.weeks fieldset > legend {margin-right:1.1em;}

來源

2013-03-13 09:53:19 Pete

這。此外，複選框在某些瀏覽器（包括Chrome）中將具有默認邊距。所以你可能想休息/明確定義。 – CherryFlavourPez 2013-03-13 09:54:43

感謝@Pete，它的工作非常出色 - 我該如何解決這個問題http://imgur.com/ZcDkgDI – methuselah 2013-03-13 09:58:49

有什麼問題？如果每行上的數字數量不正確，則只需使用上圖所示的圖例的左邊距 – Pete 2013-03-13 10:06:29

調整.weeks字段集的寬度，將強制複選框下星期去:)

.weeks fieldset { 
border: none; 
outline: none; 
width: 50px; 
}

它不再工作，因爲其他事情改變了，這是你必須做的：

.weeks fieldset .item { 
margin: 0; 
padding: 0; 
width: 40px; 
}

刪除隱藏的溢出併爲此字段添加寬度。

.weeks fieldset { 
border: none; 
outline: none; 
width: 124px;

}

我提供的可能不是你想要的，調整到自己需要的:)

來源

2013-03-13 09:48:54

我試過了，它只是讓.weeks字段消失 - http://jsfiddle.net/4YMaQ/9/ – methuselah 2013-03-13 09:53:10

將它改回原來的樣子讓我再看一眼，對我來說只是在第二秒前工作正常 – 2013-03-13 09:54:29

如果人們不斷更新小提琴，我給你的工作代碼將永遠不會工作;） – 2013-03-13 09:59:06

現在只是定義類.weeks fieldset spantext-align:center;和

定義您的.weeks fieldset labelwith:auto;

像這樣

.weeks fieldset span{ 
    text-align:center;  
} 
.weeks fieldset label{ 
    width:auto; 
}

Demo

來源

2013-03-13 09:57:07

我改變你的HTML的結構，以滿足您的需求，我的inputs後刪除了所有labels。

Here's the fiddle，讓我知道它對你是否夠好。

來源

2013-03-13 09:58:53 Bigood

只需使用display: inline-block;即可。item class有效。Demo

來源

2013-03-13 10:03:44

將.item-Elements的顯示更改爲inline-block應該可以做到。

.weeks fieldset .item { 
    display: inline-block; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
}

來源

2013-03-13 10:12:21 FLClover

難度排列在複選框CSS

回答

相關問題