单选按钮和复选框标签定位

Question

我有一个表单，单选按钮和复选框看起来像这样：

我想知道我是否可以通过某种方式摆脱按钮与其标签之间的距离。我还想将按钮移动到表单的最左侧。差不多在问题编号之下。

这是我单选按钮的CSS：

.radio{
direction: ltr;
  padding: 0 5px 0 0px;
  display: block;
  clear: left;
  float: left;
}

此外，如果有帮助的话，我的整个表单在一个名为stylss的程式化下使用css作为以下内容：

/* ----------- stylized ----------- */
#stylized{
    border:solid 2px #b7ddf2;
    background:#ebf4fb;
}
#stylized h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
}

#stylized p{
    font-size:11px;
    color:#666666;
    margin-bottom:20px;
    border-bottom:solid 1px #b7ddf2;
    padding-bottom:10px;
}
#stylized label{
    display:block;   
    text-align:right;
    width:140px;
    float:left;
}
#stylized link {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    text-decoration:none;
    color: #FFA500;
}
#stylized .small{
    color:#666666;
    display:block;
    font-size:11px;
    font-weight:normal;
    text-align:right;
    width:140px;
}
#stylized input{
    float:left;
    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:200px;
    margin:2px 0 20px 10px;
    background-color: #EEE8AA
}
#stylized input:active { background: #FF7F00 !important; color: black; }
#stylized input:focus { background: yellow; color: black; }

#stylized select{
    float:left;
    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:205px;
    margin:2px 0 20px 10px;
    background-color:#C1FFC1;
    direction: ltr
}


#date select{
    float:left;
    font-size:10px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:60px;
    margin:2px 0 20px 10px;
    background-color:#FFDAB9
}


#stylized textArea{
    float:left;
    font-size:10px;
    font-family: verdana,arial,sans-serif;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:330px;
    height:100px;
    margin:2px 0 20px 10px;
    background-color: #EEDD82
}
#stylized textarea:active { background: #FF7F00 !important; color: black; }
#stylized textArea:focus { background: yellow; color: black; }

Answer 1

处理CSS样式问题的最佳方法是在Google Chrome中打开该页面，然后右键单击相关部分，然后点击＆＃34; Inspect Element＆＃34;。然后，您将看到负责您在右侧样式显示中选择的内容的CSS。您可以从那里更改这些项目而无需重新加载页面。

所以我建议您这样做，然后在右侧显示的display: block;上，将其更改为display: none;。您可以进行这样的微小更改，直到获得所需的外观，然后更新实际的CSS。

Answer 2

您的标签右对齐：

#stylized label{
  display:block;   
  text-align:right;
  width:140px;
  float:left;
}

因此，文本正对齐其容器。