невозможно открыть меню навигации вправо в обычном HTML-заголовке - PullRequest
Новая
       3

невозможно открыть меню навигации вправо в обычном HTML-заголовке

0 голосов
/ 26 марта 2019

Я пишу простой код для создания простого заголовка с логотипом и навигационным меню внутри.Я хочу, чтобы мой логотип был слева, а меню навигации - справа.Это похоже на проблему ребенка, но я не могу решить эту проблему.

Я пытался сделать все возможное для настройки в своей 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;
}

Я ожидаювсплывающее меню справа, но оно не работает.

Ответы [ 7 ]

0 голосов
/ 26 марта 2019

Либо 

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

в вашем reset.css или style.css, либо 

<nav class="ml-auto">

в вашем index.html будет работать нормально.

0 голосов
/ 26 марта 2019

Вы должны использовать 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 голосов
/ 26 марта 2019

Я уважаю все ответы, но если вы используете Bootstrap 4, просто укажите ml-auto класс для навигации, это решит проблему.

0 голосов
/ 26 марта 2019

Я здесь, чтобы ответить на свой вопрос. Я нашел этот кусок кода в файле начальной загрузки по умолчанию 

.row {
display: flex;}

Я изменил его на display:block, и оно решено.

0 голосов
/ 26 марта 2019

Это не так много слышно, так как я просматривал ваш код, вы должны добавить простой один класс к вашему тегу nav, а это nav class = "pull-right", использовать класс pull-right, это класс начальной загрузки по умолчанию.

0 голосов
/ 26 марта 2019

Я вижу в вашем коде, что вы определяете класс .menu в своем CSS, но вы не используете его нигде в своем HTML. И вы можете сделать это лучше, используя flexbox. 

.row{
   display: flex;
   justify-content: between;
}
0 голосов
/ 26 марта 2019

У вас не определен класс меню. Вы пытаетесь использовать навигацию, если так должно быть

nav {float: right;}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...