Ориентация на навигационной панели с логотипом

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

Вот мой html-код.

<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="main.css" rel="stylesheet"> 
<title>Connection InterFace</title> 
<ul> 
    <li><a href="#" class="active">Home</a></li> 
    <li><a href="#">News</a></li> 
    <li><a href="#">Contact</a></li> 
    <li><a href="#">About</a></li> 
</ul> 
</head> 

<body> 
</body> 

<footer> 
</footer>

Вот мой css.

body { 
    background-color:white; 
} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color:red; 
} 
li { 
    float: left; 
} 
    li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 22px 24px; 
    text-decoration: none; 
} 
    li a:hover { 
    background-color:maroon; 
} 
ul { 
    position:fixed; 
    top:0; 
    width:100%; 
} 
.active { 
    background-color:black;

источник

2016-04-10 Jason

Использование Flexbox в КСС сверхгиб- в такого рода сценариев .more о Flexbox в https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Sachin

Я обновил свой ответ, чтобы показать логотип. –

Пространство было там, потому что браузер имеет по умолчанию маржу и отступы. поэтому вы удаляете дополнение, выполняя «сброс CSS». Я просто показал базовый способ удаления прокладок и разметки для всего. Теперь вы можете настроить собственные пользовательские дополнения и поля для всех, что хотите.

Я не знаю, знаете ли вы, но я хотел сказать, что в браузерах есть стили «Пользовательский агент» по умолчанию. Например, размер шрифта по умолчанию составляет 16 пикселей для большинства браузеров, но вы можете переопределить его, как дополнение и маржа. в вашем случае я считаю, что тело имеет запас 8px.

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color:white; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color:red; 
 
} 
 
li { 
 
    float: left; 
 

 
} 
 
    li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 22px 24px; 
 
    text-decoration: none; 
 
} 
 
    li a:hover { 
 
    background-color:maroon; 
 
} 
 
ul { 
 
    position:fixed; 
 
    top:0; 
 
    width:100%; 
 
} 
 
.active { 
 
    background-color:black; 
 
} 
 
.logo{ 
 
\t display: inline-block; 
 
\t width: 20%; 
 
\t background: orange; 
 
\t padding: 22px 24px; 
 
}

<ul> 
 
    <li class = "logo"><div >LOGO</div></li> 
 
    <li><a href="#" class="active">Home</a></li> 
 
    <li><a href="#">News</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">About</a></li> 
 
</ul>

Вот демо-движущихся вокруг элементов навигационных, чтобы сделать его более сосредоточенным, играя вокруг с li:nth-child(2) a{ margin-left: 50px ; } .. Это не самый лучший способ, но это хороший способ без изменения HTML настроен.

*{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
body { 
 
    background-color:white; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color:red; 
 
} 
 
li { 
 
    float: left; 
 

 
} 
 
    li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 22px 24px; 
 
    text-decoration: none; 
 
} 
 
    li a:hover { 
 
    background-color:maroon; 
 
} 
 
li:nth-child(2) a{ 
 
\t margin-left: 50px ; 
 
} 
 
ul { 
 
    position:fixed; 
 
    top:0; 
 
    width:100%; 
 
} 
 
.active { 
 
    background-color:black; 
 
} 
 
.logo{ 
 
\t display: inline-block; 
 
\t width: 20%; 
 
\t background: orange; 
 
\t padding: 22px 24px; 
 
}

<ul> 
 
    <li class = "logo"><div >LOGO</div></li> 
 
    <li><a href="#" class="active">Home</a></li> 
 
    <li><a href="#">News</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">About</a></li> 
 
</ul>

Я добавил ниже, как показать изображение для логотипа мне нравится с помощью фоновых изображений, потому что мы получаем использовать background-size: cover; полезно для отображения изображений в местах.

*{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
body { 
 
    background-color:white; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color:red; 
 
} 
 
li { 
 
    float: left; 
 

 
} 
 
    li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 22px 24px; 
 
    text-decoration: none; 
 
} 
 
    li a:hover { 
 
    background-color:maroon; 
 
} 
 
li:nth-child(2) a{ 
 
\t margin-left: 50px ; 
 
} 
 
ul { 
 
    position:fixed; 
 
    top:0; 
 
    width:100%; 
 
} 
 
.active { 
 
    background-color:black; 
 
} 
 
.logo{ 
 
\t /*display: inline-block;*/ 
 
\t width: 20%; 
 
\t background: orange; 
 
\t /*padding: 22px 24px;*/ 
 
} 
 
.logo div{ 
 
\t background: url("http://placehold.it/100x100/ff66cc/ffffff&text=IMAGE") no-repeat center center ; 
 
\t background-size: cover; 
 
\t height: 65px; 
 
}

<ul> 
 
    <li class = "logo"><div></div></li> 
 
    <li><a href="#" class="active">Home</a></li> 
 
    <li><a href="#">News</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">About</a></li> 
 
</ul>

источник

2016-04-10 04:27:42

Спасибо, что отлично сработали, точно разместите мой логотип? – Jason

Извините, где я могу разместить свой логотип? – Jason

Я обновил ответ о том, как показать изображение для логотипа. Я получил изображение из http://placehold.it/100x100/ff66cc/ffffff&text=IMAGE .. Использование фоновых изображений является хорошим, потому что мне нравится использовать 'background-size: cover;' Вы можете поместить свое изображение в html. просто поиграйте с размером. –

Избавиться неиспользованного в левом углу вы можете сделать запас, отступа 0

body { 
    background-color:white; 
    margin:0; 
    padding:0; 
}

http://codepen.io/anon/pen/grvpOE

Добавить логотип слева, путем добавления line-height в соответствии с размером изображения

li { 
    float: left; 
    line-height:7.2px; 
}

http://codepen.io/anon/pen/QNQbwb

источник

2016-04-10 04:30:23 AVI

Ориентация на навигационной панели с логотипом

ответ

Смежные вопросы