Question

我正试图从右边提取文字，'我正在填写这个表格作为个人'所以它适合在一条线上。似乎有一个“块”阻止它伸展。这是一个jsfiddle http://jsfiddle.net/9M8FQ/如果我调整标签的宽度，它会调整每个字段，但我真的希望它远远超过左边。以下是我试图获取http://www.magnetikmedia.co.uk/images/screen.jpg

的屏幕截图

以下是代码：

<div class="myclass active"  id="right_box">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
      <td height="0" colspan="2" valign="middle"><label class="desc" id="Name"  for="Name">Before filling out the form, please select an option below: <span id="req_2"  class="req" style="color:#82cff5;">*</span></label>
      </td>
    </tr>
    <tr height="0">
      <td width="30" height="0" align="left" valign="middle" style="padding-left:7px;"><input type="checkbox" id="individual" name="FilledInBy_Individual" value="Yes" onClick="unCheck(this.id);" <%=ind%> />
      </td>
      <td height="0" valign="middle" style="padding-left:7px;"><label for="option2">I am filling out this form as an Individual</label>
      </td>
      <tr height="0">
      <td width="30" height="0" align="left" valign="middle" style="padding-left:7px;">   <input type="checkbox" id="agencyconsultant" name="FilledInBy_Agency" value="Yes" onClick="unCheck(this.id);" <%=agent%>/>
      </td>
      <td height="0" valign="middle" style="padding-left:7px;"><label for="option2">I am filling out this form as an Agency Consultant</label>
      </td>
    </tr>
    <tr height="0">
      <td width="30" height="0" align="left" valign="middle" style="padding-left:7px;"> <input type="checkbox" id="friendrelative" name="FilledInBy_FriendRelative" value="Yes" onClick="unCheck(this.id);" <%=friend%>/>
      </td>
      <td height="0" valign="middle" style="padding-left:7px;"><label for="option3">I am filling out this form as a friend or relative</label>
      </td>
    </tr>
    <td height="0" colspan="2"><%   if request.cookies("Filled_error") <> "" then %>
          <div id="firstname_error" class="errorActive" style="position:relative;">Please select an appropriate option</div>
          <%    end if %>
    </td height="0">
      </table>
      </div>

CSS

label {
clear: both;
float: left;
padding-right: 10px;
width: 240px;
}

input{
float: left;
width: 425px;
}
.myclass {
border-width: 2px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
color: #000000;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:5px;
}
#right_box {
width: 700px;
float: left;
margin-left: 33px;
margin-bottom: 10px;
padding-top: 20px;
padding-right: 0px;
padding-left: 15px;
background-color:#eaeaea;
}

EDIT。即使调整标签宽度只是将文本向右推到一行，它只是因为这个'墙'而不再向左移动

Answer 1

这是因为输入的宽度很大，推动了正确的文字。但由于中心的原因，它似乎不是这样。

这是demo。

Answer 2

放

input[type='checkbox'] {width:auto}

在css中。这将照顾复选框。尽管如此，仍然存在标签宽度的问题......

扩展表单<label> issue </label>的宽度

2 个答案: