Question

我正在编写一个简单的代码来设计带有徽标和导航菜单的普通标头。我希望徽标位于左侧，导航菜单位于右侧。看起来像是儿童问题，但我无法解决此问题。

我试图在我的IDE和Chrome Inspection中进行所有可能的调整，但无法弄清。

我的Index.html代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PSD to Page</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
    <script type="text/javascript" src="js/respond.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- body content -->
    <header class="secondary-sky-blue-bg">
        <div class="container">
            <div class="row">
                <a href="#" class="logo">
                    <img src="img/logo.png" alt="logo" />
                </a>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>    
                </nav>
            </div>
        </div>
    </header>
    <!-- javascript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

和style.css是

header {
    color: #fff;
    height: 100px;
    line-height: 100px;
}
header a.logo{
    float: left;
    margin-right:10px;
}

.menu {
    float: right;
}

.logo img {
    width: 100px;
}

body {
    font-size: 16px;
    line-height: 22px;
    font-family: 'Poppins', sans-serif;
}

header nav ul li {
    padding-left: 20px;
}

header nav ul li a {
    color: #fff;
}

我也有一个reset.css

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #777;
}

h1
{
    font-size: 36px;
    color: #555;
    font-weight: bold;
}

h2
{
    font-size: 30px;
    color: #555;
    font-weight: bold;
}

h3
{
    font-size: 24px;
    color: #333;
    font-weight: bold;
}

.primary{
    color: #e74c3c;
}

.primary-bg{
    background-color: #e74c3c;
}

.secondary-dark-blue
{
    color: #34495e;
}

.secondary-dark-blue-bg
{
    background-color: #34495e;
}

.secondary-sky-blue
{
    color: #2d82d8;
}

.secondary-sky-blue-bg
{
    background-color: #2d82d8;
}
ul{
    list-style: none;
}
ul li {
    display: inline-block;
}

我希望导航菜单向右浮动，但是它不起作用。

Answer 1

您没有定义菜单类。您是否要使用导航，如果应该的话

nav {float：right;}

Answer 2

我可以在您的代码中看到您正在css中定义类.menu，但是您没有在html的任何地方使用它。而且，您可以使用flexbox更好地做到这一点。

.row{
   display: flex;
   justify-content: between;
}

Answer 3

由于我已经审查过您的代码，因此您不得不在nav标签中添加简单的一个类，而听到的很少，这就是nav class =“ pull-right”使用pull-right类，它是默认的引导类。

Answer 4

我在这里回答我自己的问题。我在默认的引导文件

中找到了这段代码

.row {
display: flex;}

我将其更改为display:block并解决了。

Answer 5

我尊重所有答案，但如果您使用Bootstrap 4，只需给ml-auto类进行导航，即可解决此问题。

Answer 6

要么

.row {
    display: block;
    justify-content: between;
}

在您的reset.css或style.css中或

<nav class="ml-auto">

您的index.html中的

可以正常工作。

Answer 7

您必须在col-md-12 中使用row。我为nav和margin-left:auto使用了flex属性，以使菜单右侧对齐。

您可以选择将浮动方法与clearfix一起使用，以使菜单右侧对齐。

* {
    box-sizing: border-box;
    position: relative;
}

header {
    color: #fff;
    height: 100px;
    line-height: 100px;
    padding: 0 10px;
}

header a.logo {
    display: inline-block;
}

.menu {
    float: right;
}

.logo img {
    width: 100px;
}

body {
    font-size: 16px;
    line-height: 22px;
    font-family: 'Poppins', sans-serif;
}

header nav ul li {
    padding-left: 20px;
}

header nav ul li a {
    color: #fff;
}


/** second css **/

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #777;
}

h1 {
    font-size: 36px;
    color: #555;
    font-weight: bold;
}

h2 {
    font-size: 30px;
    color: #555;
    font-weight: bold;
}

h3 {
    font-size: 24px;
    color: #333;
    font-weight: bold;
}

.primary {
    color: #e74c3c;
}

.primary-bg {
    background-color: #e74c3c;
}

.secondary-dark-blue {
    color: #34495e;
}

.secondary-dark-blue-bg {
    background-color: #34495e;
}

.secondary-sky-blue {
    color: #2d82d8;
}

.secondary-sky-blue-bg {
    background-color: #2d82d8;
}

ul {
    list-style: none;
}

ul li {
    display: inline-block;
}

.nav-wrapper {
    margin-left: auto;
}

nav {
    display: flex !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
<header class="secondary-sky-blue-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <nav>
                    <a href="#" class="logo">
                        <img src="https://via.placeholder.com/250x150" alt="logo" />
                    </a>
                    <div class="nav-wrapper">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>

无法将导航菜单浮动到纯HTML标头的右侧

7 个答案: