Question

我很难将我的复选框（在周下）与我表单的其他部分排列（即 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;
}

Answer 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;

}

我提供的宽度可能不是您想要的宽度，可根据您的需要进行调整：）

Answer 2

您的跨度是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;}

Answer 3

现在只需定义您的课程.weeks fieldset span text-align:center;和

定义您的.weeks fieldset label with:auto;

就像这样

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

<强> Demo

Answer 4

我更改了HTML的结构以符合您的需求，我删除了labels之后的所有inputs。

Here's the fiddle，请告诉我这是否适合您。

Answer 5

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

Answer 6

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

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

难以在CSS中对齐复选框

6 个答案: