0

チェックボックス ( Weeksの下) をフォームの他のセクション (つまり2. Date & Time )に並べるのに苦労しています。これに加えて、チェックボックスの右側にテキストが表示されないようで、常に下に表示されているようです。どうすればこれを解決できますか?

これが私のフィドルです：http://jsfiddle.net/4YMaQ/2/

コード

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;
}
4

6 に答える 6

1

クラス .weeks fieldset span text-align:center;を定義するだけで、

あなたを定義する.weeks fieldset label with:auto;

このように 

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

デモ

于 2013-03-13T09:57:07.933 に答える
1

あなたのスパンは2emです（下の行で12emを上書きしたようです）が、ラベルは8emであるため、変更すると次の行に折り返されます

スパンを 3.5em に、ラベルを 1.5em に変更すると、次のようになります。

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

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

凡例の右マージンを変更すると、1 行に 5 つ収まります。

 .weeks fieldset > legend {margin-right:1.1em;}
于 2013-03-13T09:53:19.853 に答える
1

.item-Elements の表示を変更するとうまくいくinline-blockはずです。

.weeks fieldset .item {
    display: inline-block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
于 2013-03-13T10:12:21.723 に答える
1

ニーズに合わせて HTML の構造を変更しましlabelsたinputs。

これがフィドルです。それで十分かどうか教えてください。

于 2013-03-13T09:58:53.340 に答える