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

我有一个表格，其中单选按钮和复选框看起来像这样： enter image description here 单选按钮，复选框标签定位

我想知道如果我能的按钮及其标签之间摆脱了距离的某种方式。我也喜欢将按钮移动到表单的最左侧。几乎在问题编号下。

这是目前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; }

来源

2012-09-25 Disasterkid

人们只能猜测，如果你不给这种形式的HTML源。 – arkascha

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

所以我建议你这样做，然后在display: block;这是在右侧显示，将其更改为display: none;。您可以在整个过程中进行这样的小改动，直到您获得想要的外观，然后更新您的实际CSS。

来源

2012-09-25 12:05:28

非常感谢！ Google Chrome已经成为我的头号CSS调试器。 – Disasterkid

@Pedram请记住，不同的浏览器呈现不同的CSS;所以不时在其他浏览器中查看它。 Internet Explorer的版本也不尽相同，因此当您在IE中按F12键时，您可以设置不同的浏览器模式以查看所有内容的外观和行为。 –

绝招！超级有用 –

你有你的标签的文本对齐右：

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

所以，文本右对齐到其容器。

来源

2012-09-25 14:56:19 geebru

是的，但它没有奏效。 – Disasterkid

我很困惑 - 如果你想要它左对齐（即消除该空隙），将其设置为文本对齐：向左。如果您的容器宽度为140像素，并且您将文本对齐设置为正确，那么就可以做到这一点。 – geebru

是的，你是对的@geebru，但实际上，我意识到如果我删除了一些不必要的CSS导致这些问题，我更默认的舒适。但你的回答是正确的。我也不知道谷歌浏览器的检测元素如何帮助您追踪代码并找到问题。 – Disasterkid

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

回答

相关问题