当我在 Firefox 中查看页面时，CSS 复选框居中对齐而不是左对齐，在 Chrome 和 Safari 中工作正常
所以我有一个表单，其中有多个输入文本字段以及一个或两个选择框，然后是 3 个复选框。 Chrome 中的所有内容都正确排列，看起来很棒，然后我在 Firefox 中查看它，除了复选框之外的所有内容都排列整齐，它们在其区域中居中对齐，而不是像 Chrome 中那样靠左对齐。我尝试在它周围放置一个额外的 div，但似乎没有什么可以破坏它。我在代码中没有看到任何帮助或错误吗？
表单上的复选框
<div class="blueTable"> - this is for the rest of the form and table
<div class="checkbox"> - this is what I put in to override
<label>Is this a letter?</label>
<input type="checkbox" name="letter" value="YES" class="checkbox"/>
<label>Return label?</label>
<input type="checkbox" name="return" value="YES" class="checkbox"/>
<label>Save destination for future shipments?</label>
<input type="checkbox" name="save_destination" value="YES" class="checkbox"/>
</div></div>
CSS 文件
.blueTable input,.blueTable select{
float:left;
font-size:12px;
padding:4px 2px;
width:400px;
margin:2px 0 20px 10px;
text-align: left;
}
.checkbox {
text-align: left;
float: left;
vertical-align: bottom;
position: relative;
}
so I have a form that I have multiple input text fields as well as a select box or two and then 3 checkboxes. Everything lines up correctly in Chrome and looks great, then I look at it in firefox and everything except the checkboxes line up, they instead are center aligned in their area rather than being to the left like in Chrome. I have tried putting an extra div around it and everything but nothing seems to break it. Any help or errors that I am not seeing in the code?
Checkbox on the form
<div class="blueTable"> - this is for the rest of the form and table
<div class="checkbox"> - this is what I put in to override
<label>Is this a letter?</label>
<input type="checkbox" name="letter" value="YES" class="checkbox"/>
<label>Return label?</label>
<input type="checkbox" name="return" value="YES" class="checkbox"/>
<label>Save destination for future shipments?</label>
<input type="checkbox" name="save_destination" value="YES" class="checkbox"/>
</div></div>
CSS File
.blueTable input,.blueTable select{
float:left;
font-size:12px;
padding:4px 2px;
width:400px;
margin:2px 0 20px 10px;
text-align: left;
}
.checkbox {
text-align: left;
float: left;
vertical-align: bottom;
position: relative;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
http://jsfiddle.net/MfNdF/ 这是您想要的吗？
.blueTable 输入为您的复选框提供了 400 像素的宽度，这可能会导致问题。
http://jsfiddle.net/MfNdF/ is this something you are going for?
.blueTable input gives your checkboxes width of 400 pixels which might cause the problem.
尝试使用 CSS 和表格混合布局。对齐您的页面。这可能有助于您的网页在更多浏览器中更好地显示，尤其是那些不像 Chrome 那样兼容 CSS 的浏览器。
Try using a CSS and table hybrid layout. To align your page. This may help your web page show up better across more browsers especially ones that are not as CSS compliant as chrome.