0

编辑：现在 flexbox 已经基本得到普遍支持，使用 flexbox！

我希望div导航栏有 3 个彼此相邻的对象。右边应该有一个图像开始导航栏，最后一个结束它，中间部分应该尽可能宽以容纳所有文本。导航栏应该在页面的中间。我不确定我是否完全错了，因为它根本不起作用。这是我已经得到的代码。

HTML：

<div class="navigation">
    <div class="navLeft"></div>
    <div class="navMiddle">
        <ul>
            <li id="active"><a href="index.html">Home</a></li>
            <li><a href="info.html">Info</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
        </ul>
    </div>
    <div class="navRight"></div>
</div>

CSS：

.navigation {
    margin: auto;
    height: 70;
}

.navigation ul {
    list-style: none;
}

.navigation ul li {
    display: inline;
    margin: 0px;
}

.navLeft {
    float: left;
    width: 13;
    height: 70;
    background: url(../images/Nav_L.png);
}

.navMiddle {
    height: 70;
    background: url(../images/Nav_Mid.png) repeat-x;
}

.navRight {
    float: right;
    width: 13;
    height: 70;
    background: url(../images/Nav_R.png);
}
4

7 回答 7

1

首先，您的 css 中有很多错误。

width:13;      // WRONG

width:13px;    //CORRECT

任何大于 0 的, width,height应该有margin,或paddingpxem%

于 2013-10-07T16:58:05.993 回答
0

我认为您可以将 <div class="navRight"> 放在 <div class="navMiddle"> 之前

<div class="navigation">
<div class="navLeft"></div>
<div class="navRight"></div> <!-- place navRight div here -->
<div class="navMiddle">
    <ul>
        <li id="active"><a href="index.html">Home</a></li>
        <li><a href="info.html">Info</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
    </ul>
</div>
</div>
于 2013-10-07T17:09:26.017 回答
0

我会使用inline-block而不是浮动。它给你更好的处理。

看看这个小提琴

顺便说一句：除了0需要有值之外的值，所以70需要70px

于 2013-10-07T16:55:41.827 回答
0

嗨，我强烈建议您通过硬编码来省去这些麻烦，并使用flexbox。它提供了一个更清洁的解决方案，并且无需太多硬编码即可提供更多控制。

http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2013-10-07T16:55:56.540 回答
0

如果不查看正在发生的事情，就很难诊断出这个问题。我想您需要在导航类上设置宽度。将所有三个类（navLeft、navMiddle 和 navRight）浮动在同一方向（最有可能向左）可能会有所帮助。如果您想将所有这些垂直居中，您很可能需要确保包含此导航的任何内容的高度为 100%。

于 2013-10-07T16:53:02.823 回答
0

添加width: calc(100% - 26px);将占用剩余宽度.navMiddle。

JSFIDDLE

于 2013-10-07T17:13:54.197 回答
0 
.navLeft, .navMidlle, .navRight{display:inline;}

我想这会起作用，您可以尝试测试一下。删除浮动：左；和浮动：对；在你的 CSS 中。

于 2014-03-19T20:48:42.400 回答