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>置于两个飞行器之间，但我无法让它工作。外部容器正确拉伸，“home”和“options”分区也正确放置。但是，“设置”与“家”相对应。

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

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

提前致谢

更新：找到答案。我在这里张贴以防万一有类似问题的人发现它很有用。包含<div>的{{1}}本身位于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/

Answer 2

尝试将位置CSS属性用于第三个div。你告诉它应该有自动边距，但不应该放在哪里。

例如：

<div id="settings" class="button-style" style="width: 4px;position:absolute; left:10px; margin-left: auto; margin-right: auto;">

尝试根据您的方便指定属性

Answer 3

如果你想使用CSS float命令元素，你应该正确地对它们进行排序并将它们全部浮动到同一侧。

<div id="home" class="button-style" style="width: 4px; float: left;">
    <a href="_blank"></a>
</div>
<div id="settings" class="button-style" style="width: 4px;float: left; text-align:center">
    <a href="_blank"></a>
</div> 
<div id="options" class="button-style" style="width: 4px; float: left;">
    <a href="_blank"></a>
</div>

第三个现在介于另外两个之间。

Answer 4

您需要重新订购HTML，这是一个示例

DEMO http：http://jsfiddle.net/kevinPHPkevin/UKL4B/2/

<div id="wrapper" 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">1</a>
    </div>
    <div id="options " class="button-style " style="width: 4px; float: right; ">
        <a href="_blank ">3</a>
    </div>  
    <div id="settings " class="button-style " style="width: 4px; margin-left: auto; margin-right: auto; ">
        <a href="_blank ">2</a>
    </div> 
</div>

在这个例子中：第一个div向左浮动，第二个div向右浮动，然后第三个div填充间隙（假设它有空间）。这就是HTML的工作原理。

调试CSS和HTML的好工具是google chrome中的google开发工具。为了调试javascript，我建议在firefox

上使用firebug

Answer 5

text-align: center;

中心div上的

似乎解决了这个问题。

fiddle

Answer 6

首先要做的事情。 1.关于代码未对齐

您是否尝试实现此 enter image description here

如果是，请尝试以下代码

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

确保添加内容并从样式中删除高度，因为高度可能会保持自动。

不确定为什么你有1个div左浮，1个浮右，1个不浮。
如果您的div是浮动的，那么您可能需要修改它们的宽度（您已经做好了）并将它们的高度设置为自动以使其自动调整。

4最后你的问题：一世。什么是最好的调试工具？我目前使用chrome的内置元素查看器，因为它显示了应用了哪些样式。但是，它只是不够强大 [尝试使用Firefox和Firebug，它允许你动态调试代码] II。是否有可视化IDE在您键入时显示结果？在'Netbeans'和'chrome'之间切换是浪费时间。我应该注意，任何IDE都需要使用我的服务器，因为我也编码PHP [Firebug本身可以帮助你在javascript中做同样的事情（不确定php）] III。什么可能导致我看到的问题？是缺少样式还是与元素的大小有关的方法 [如果元素为空，或者如果它们包含某些内容，则将高度设置为自动，这里你需要做的就是固定高度，请看你需要添加行高到元素，以使它们垂直对齐，因为我假设元素包含文本]

最重要的是尝试避免排名：绝对因为这会导致不同浏览器中的错位

Answer 7

它正常运行，但你还没有修复它。（=

如果您的计划是将css拉出并包含.css文件，那么您应该考虑使用flexbox

Flexbox primer

它确实消除了愚蠢的浮动规则和古怪的定位。如果你打算在任何长时间内使用css，我建议你把牙齿塞进去。

CSS样式没有做他们应该做的事情

7 个答案: