0

我第一次编写 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 上测试了代码，所以我很确定问题出在我的代码中，但我找不到。

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

提前致谢

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

4

7 回答 7

2

您可以将 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/

于 2013-08-17T15:31:33.027 回答
0

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

例如 ：

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

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

于 2013-08-17T15:08:16.077 回答
0

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

<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>

第三个现在位于其他两个之间。

于 2013-08-17T15:11:12.480 回答
0

您需要重新排序 HTML，这是一个示例

演示 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. 对于调试 javascript，我建议使用 firebugfirefox

于 2013-08-17T15:11:36.580 回答
0 
text-align: center;

在居中的 div 上似乎可以解决问题。

小提琴

于 2013-08-17T15:12:11.690 回答
0

第一件事。1.关于你的代码不对齐

你想达到这个目的吗在此处输入图像描述

如果是，请尝试以下代码

<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. 不知道为什么你有 1 个 div 向左浮动，1 个向右浮动，1 个根本不浮动。
  2. 如果您的 div 是浮动的，那么您可能必须修复它们的宽度（很好，您已经这样做了）并将它们的高度设置为 auto 以使其自动调整。

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

最重要的是尽量避免 position:absolute 因为这有时会导致不同浏览器中的错位

于 2013-08-17T15:19:12.533 回答
0

它工作正常，但你还没有真正修复它。(=

如果您的计划是提取 css 并包含一个 .css 文件，那么您应该考虑使用 flexbox

Flexbox 底漆

它确实消除了愚蠢的浮动规则和古怪的定位。如果您打算在任何时间使用 css，我敦促您将牙齿投入其中。

于 2013-08-22T15:25:55.797 回答