Question

我使用了另一篇文章（positioning an image next to a menu bar with html/css），它运作良好，但现在我的标题表现得非常奇怪！如果您在全屏幕中查看示例代码的结果，您会看到其中一些卡在我的菜单栏旁边。愿有人请帮帮我吗？我希望我的标题低于我的菜单栏。

body {
    font-family: sans-serif;
}
h1 {
    font-family: comic sans ms;
    float: top;
}
nav ul {
    list-style-type: none;
    background-color: blue;
    border: 4px solid orange;
    border-radius: 500px;
    font-family: sans-serif;
    font-weight: bold;
    padding: 16px;
}
nav ul li {
    display: inline;
    border-right: 2px solid orange;
    padding-right: 8px;
    padding-left: 8px;
}
nav ul li:last-child {
    border-right: none;
}
nav ul li a {
    text-decoration: none;
    color: orange;
}
nav {
    display: inline;
}
div {
    float: left;
}
nav {
    float: left;
}

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <link type="text/css" rel="stylesheet" href="css/example.css"/>
    <div>
        <img src="images/example.jpg">
    </div>
    <nav>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="example.html">Example</a></li>
            <li><a href="random.html">Random</a></li>
            <li><a href="blah-blah.html">Blah Blah</a></li>
            <li><a href="other.html">Other</a></li>
            <li><a href="something-else.html">Something Else</a></li>
            <li><a href="more.html">More</a></li>
        </ul>
    </nav>
</head>
<body>
    <h1>Example Example Example Example Example Example Example</h1>
</body>
</html>

Answer 1

您的HTML无效，您不应该将这些html标记放在<head>中。无论如何，我认为你的css过于具有侵略性，为页面上的每个float设置div？绝对过于激进，我删除了一些不必要的浮动并将导航设置为inline-block

＆＃13;

body {
    font-family: sans-serif;
}
h1 {
    font-family: comic sans ms;
}
nav {
display: inline-block;
}
nav ul {
    list-style-type: none;
    background-color: blue;
    border: 4px solid orange;
    border-radius: 500px;
    font-family: sans-serif;
    font-weight: bold;
    padding: 16px;
}
nav ul li {
    display: inline;
    border-right: 2px solid orange;
    padding-right: 8px;
    padding-left: 8px;
}
nav ul li:last-child {
    border-right: none;
}
nav ul li a {
    text-decoration: none;
    color: orange;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <link type="text/css" rel="stylesheet" href="css/example.css"/>
</head>
<body>
  <div>
        <img src="images/example.jpg">
    </div>
    <nav>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="example.html">Example</a></li>
            <li><a href="random.html">Random</a></li>
            <li><a href="blah-blah.html">Blah Blah</a></li>
            <li><a href="other.html">Other</a></li>
            <li><a href="something-else.html">Something Else</a></li>
            <li><a href="more.html">More</a></li>
        </ul>
    </nav>
    <h1>Example Example Example Example Example Example Example</h1>
</body>
</html>

＆＃13;

具有航向，导航和浮动的困境

1 个答案: