无法在简单的html标题中向右浮动导航菜单

问题描述 投票：0回答：7

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

我试图在我的IDE以及Chrome检测中进行所有可能的调整，但无法弄明白。

我的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;
}

我期待导航菜单向右浮动，但它不起作用。

css html5
7个回答
0
投票

您没有定义菜单类。您是否尝试使用导航，如果是这样的话

nav {float：right;}

0
投票

我可以在你的代码中看到你在你的css中定义类.menu，但是你没有在你的html中的任何地方使用它。您可以使用flexbox以更好的方式完成此操作。

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

它没有听到，因为我已经审查了你的代码，你必须添加简单的一个类到您的导航标签，这是nav class =“pull-right”使用类拉 - 右，它是默认的bootstrap类。

0
投票

我在这里回答我自己的问题。我在默认的bootstrap文件中找到了这段代码

.row {
display: flex;}

我把它改成了display:block并且它被解决了。

0
投票

我尊重所有的答案，但如果你使用Bootstrap 4只是给ml-auto类导航它将解决问题。

0
投票

你必须在col-md-12内使用row。我已经使用flex属性为nav和margin-left:auto对齐菜单右侧。

您可以选择使用带有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>
0
投票

或

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

在你的reset.css或style.css或

<nav class="ml-auto">

在您的index.html中将正常工作。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.