1

我正在尝试为我正在制作的 Web 模板构建标题/导航系统，这是我正在尝试做的事情的概述：http: //i.imgur.com/gvA4Xzo.png

这是我的 CSS 代码。

#header {
    margin:0 auto;
    width:1000px;
    height:auto;
    background-color:#666;
}

#header .navimg {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(../images/header_img.png) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

#header ul {
    list-style-type: none;
}

#header ul li {
    display: inline;
}

这是我正在使用的 HTML。

<body>
    <div id="header">
        <ul>
            <li><a href="">Durka Durk</a></li>
            <li><a href="">Durka Durk</a</li>
            <li><div class="navimg"></div></li>
            <li><a href="">Durka Durk</a></li>
            <li><a href="">Durka Durk</a></li>
        </ul>
    </div>
</body>

这是我运行它时得到的：http: //i.imgur.com/pnPvdAp.png（看起来很不稳定，因为我刚刚开始它）。

我希望中间图像与链接显示在同一行，而不是新的。我怎样才能做到这一点？

4

3 回答 3

1

如果您将其更改为display: inline;，float: left;那么您将达到您想要的效果。

您需要将图像高度添加到标题div中以显示颜色。

我有一个小提琴向你展示它的外观。

#header ul li {
  float: left;
}

#header {
  margin:0 auto;
  width:1000px;
  height: 300px;
  background-color:#666;
}

JSFIDDLE

于 2013-10-18T15:07:24.247 回答
0

尝试这个。您必须“向左浮动”而不是使用“显示内联”。并在锚标签上添加填充以进行调整。

类似的东西。点击这里

    #header ul li {
    float: left;
}

    #header ul li a
{
    display:inline-block;
    padding:100px 1px; /*set it or margin on it.*/
}
于 2013-10-18T15:11:34.287 回答
0

在一行中显示内容，这可以使用display: inline这两个元素来实现。在你的情况下ul和img.

您还可以尝试更改图像的宽度和高度。

于 2013-10-18T15:04:10.273 回答