Question

我正在创建一个简单的网页（在教程之后）。我创建了一个菜单栏，标题和文本内容。我想在菜单栏的左侧显示标题。这样，在顶部（从左到右）有标题和菜单。

我已经读到，您应该使用float: left;来实现此目的，但这没有用。

HTML：

<!DOCTYPE html>

<html>
<head>
    <title>Test Page</title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css"/>

</head>
<body>

    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <h1><font face="Arial" color="black" size="8">Project Name</font></h1>
    <p>This is a simple test Page

    </p>
</body>
</html>

CSS：

h1 {
    float: left;
}
ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #4CAF50
}

body {
    background-color: #ECECEC
}

当前标题位于菜单下方，但位于页面左侧：http://jsfiddle.net/wCV2X/1/

如何获取以便菜单和标题一致？

谢谢。

Answer 1

这样做：
然后，您应该有一个漂亮的菜单，其标题或徽标在左侧。 Float: left遵循元素的顺序，因此您应该将标题放在菜单之前，以使其出现在左侧。

p {
    float: left;
    margin-right: 20px;
    line-height:13px;
}
ul {
    list-style-type:none;
    margin: 0;
    padding: 4;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #4CAF50
}

body {
    background-color: #ECECEC
}

<!DOCTYPE html>

<html>
<head>
    <title>Test Page</title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css"/>

</head>
<body>
  
    <ul>
    <p><font face="Arial" color="white" size="4">Project Name</font></p>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    
    <div id="pagecontent">
      <p>This is a simple test Page

    </p>
    </div>
  
</body>
</html>

Answer 2

h1 {
    float: left;
}
ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #4CAF50
}

body {
    background-color: #ECECEC
}

<html>
<head>
    <title>Test Page</title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css"/>

</head>
<body>
 <h1><font face="Arial" color="black" size="8">Project Name</font></h1>
    <ul>
        
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    
    <p>This is a simple test Page

    </p>
</body>
</html>

Answer 3

将<h1>移动到菜单栏的开头，然后将其放在<li>内，如下所示：

h1 {
    float: left;
}
ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #4CAF50
}

body {
    background-color: #ECECEC
}

<!DOCTYPE html>

<html>
<head>
    <title>Test Page</title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css"/>

</head>
<body>

    <ul>
        <li><h1><font face="Arial" color="black" size="8">Project Name</font></h1></li>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <p>This is a simple test Page

    </p>
</body>
</html>

水平导航旁边的标题

3 个答案: