html - CSS 样式没有做它们应该做的事

Question

我第一次尝试编写 HTML 并不顺利。我通常非常善于发现如何做事，但在这种情况下，给出的解决方案根本行不通。

这是我最新的挠头:

<div style="margin-top: 9px; margin-bottom: 9px; float: right; width: 55.45%;">
    <div id="home" class="button-style" style="width: 4px; float: left;">
        <a href="_blank"></a>
    </div>
    <div id="options" class="button-style" style="width: 4px; float: right;">
        <a href="_blank"></a>
    </div>  
    <div id="settings" class="button-style" style="width: 4px; margin-left: auto; margin-right: auto;">
        <a href="_blank"></a>
    </div> 
</div>

请原谅内联样式，它们允许我即时编辑。

上面应该居中第三个<div>在两个漂浮物之间，但我就是无法让它工作。外容器正确拉伸(stretch)，“主页”和“选项”部分也正确放置。但是，“设置”与“主页”相对应。

这只是不起作用的例子之一。其他包括垂直居中(几乎所有方法)和根据媒体查询重新排列垂直顺序。我在 chrome 和 IE10 上测试了代码，所以我很确定问题出在我的代码中，但我找不到它。

1. 最好的调试工具是什么？我目前使用 chrome 的内置元素查看器，因为它会显示应用了哪些样式。但是，它还不够强大。
2. 是否有可视化 IDE 可以在您键入时显示结果？在“Netbeans”和“chrome”之间切换很浪费时间。在这里我应该注意，任何 IDE 都需要与我的服务器一起工作，因为我也在编写 PHP。
3. 可能是什么导致了我所看到的问题？是缺少样式还是与元素的大小有关？
4. 我应该检查哪些样式以在链的更上层进行检查，因为这些样式可能会导致以后很难发现错误？

提前致谢

更新:已找到答案。我在这里发帖以防有类似问题的人发现它有用。含 <div>本身被定位为float: right; .由于某些原因，包含的元素受此影响。如果有人想写一个答案来解释为什么我很乐意接受它。添加float: none;到中心元素解决了问题。

Answer 1

可以将div的宽度设置为33.33%，简化成这样:

HTML

<div id="container">
    <div id="home" class="button-style">
        <a href="#" target="_blank">home</a>
    </div>
    <div id="options" class="button-style">
        <a href="#" target="_blank">options</a>
    </div>
    <div id="settings" class="button-style">
        <a href="#" target="_blank">settings</a>
    </div>
</div>

CSS

#container {
    margin: 9px 0px;
    float: right;
    width: 55.45%;
    border:1px solid red;
    position:relative;
}
#container>div {
    float:left;
    width:33.33%;
    *width:33%; /* fix for IE7 rounding bug */
    text-align:center;
}
#container>div:hover {
    background-color: #fdd;
}
#container a {
    text-decoration:none;
    display:inline-block;
    *display:inline; zoom:1; /*IE7 fix for inline-block */
    width:100%;
}

JSFiddle : http://jsfiddle.net/CMtQS/2/