Question

我正在尝试垂直显示复选框，并在每个复选框的右侧显示标签，但似乎无法正确显示格式。

我正在尝试做的示例：

复选框1标签1

复选框2标签2

以下是HTML：

<form class="addmod" method="post">
<table width="800px">
<tr>
 <td valign="top">
  <label><h5>Version Compatibility:</h5></label>
 </td>
<td><input name="v162" type="checkbox" id="v162" value="1.6.2"><label><h5>1.6.2</h5></label></td>
<td><input name="v164" type="checkbox" id="v164" value="1.6.4"><label><h5>1.6.4</h5></label></td>
<td><input name="v172" type="checkbox" id="v172" value="1.7.2"><label><h5>1.7.2</h5></label></td>

和CSS：

.addmod {
margin: 0 auto; 
width: 400px;
}

#add input {
width: 100px;
height: 40px;
padding: 10px 5px;
font: bold 15px Calibri;
border: 0;
background: #FFF;
border-radius: 2px 2px 2px 2px;
}

.addmod label {
text-align: left;
display: inline;
}

.addmod td {
text-align: center;
}

.addmod input[type=checkbox] {
display: block;
}

以下是jsFiddle： http://jsfiddle.net/swiftsly/syvY4/

Answer 1

您需要将.addmod input和.addmod label更改为inline-block，并将display: block添加到td。

<强> CSS

.addmod label {
    text-align: left;
    display: inline-block;
}
.addmod td {
    text-align: center;
    display: block;
}
.addmod input[type=checkbox] {
    display: inline-block;
}

这是小提琴：http://jsfiddle.net/syvY4/4/

垂直显示复选框，每个复选框旁边都有标签

1 个答案: