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 字段集的宽度，您可以强制复选框低于周数:)

.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-13T09:48:54.547 回答
1

你的跨度是 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-13T09:53:19.853 回答
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

我更改了 HTML 的结构以满足您的需要，我删除了labels所有inputs.

这是小提琴，让我知道它是否对你足够好。

于 2013-03-13T09:58:53.340 回答
1

只需使用它display: inline-block;即可item class。演示

于 2013-03-13T10:03:44.410 回答
1

将 .item-Elements 的显示更改为inline-block应该可以解决问题。

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