1

我有一个表单，其中单选按钮和复选框如下所示： 在此处输入图像描述

我想知道我是否可以以某种方式摆脱按钮与其标签之间的距离。我也喜欢将按钮移动到表单的最左侧。几乎在题号之下。

这是目前我的单选按钮的 CSS：

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

如果有帮助，我的整个表单也可以在一个名为风格化的 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; }
4

2 回答 2

4

处理 CSS 样式问题的最佳方法是在 Google Chrome 中打开页面，然后右键单击有问题的部分，然后单击“检查元素”。然后您将在右侧样式显示中看到负责您选择的内容的 css。您可以从那里更改这些项目，而无需重新加载页面。

所以我建议你这样做，然后在display: block;右侧显示屏上，将其更改为display: none;. 您可以在整个过程中进行这样的细微更改，直到获得所需的外观，然后更新您的实际 css。

于 2012-09-25T12:05:28.500 回答
0

您的标签文本正确对齐：

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

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

于 2012-09-25T14:56:19.320 回答