Как я могу воспользоваться этой навигационной панелью?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Untitled Document</title> 
 
<style> 
 
.abc { 
 
\t width:600px; 
 
\t height:120px; 
 
\t background-color:yellow; 
 
\t display:inline-block; 
 
} 
 
ul{ 
 
\t position:relative; 
 
\t display:inline-block; 
 
\t } 
 
ul li { 
 
\t display:inline; 
 
\t font-size:24px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="abc"> 
 
<img src="../../../Desktop/254014_208382935867586_7113053_n.jpg" width="180" height="120" /> 
 
<ul > 
 
<li><a href="www.quora.com">Home</a></li> 
 
<li><a href="www.quora.com">gallery</a></li> 
 
<li><a href="www.quora.com">about us</a></li> 
 
<li><a href="www.quora.com">contact</a></li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>

Я хочу взять эту навигационную панель вверх (по выравниванию центра логотипа). Как это сделать? Я новичок в html/css, а также новичок в переполнении стека.

источник

2016-09-16 Ankit Kungwani

Попытка сделать изображение 'дисплей: блок;'. – Xufox

Вы можете использовать HTML5 <nav> тег, и FlexBox для достижения этой цели.

Адрес: DEMO.

HTML:

<nav> 
    <img src="path/to/my/logo" width="180" height="100%"> 
    <a href="#">home</a> 
    <a href="#">gallery</a> 
    <a href="#">about us</a> 
    <a href="#">contact</a>  
</nav>

CSS:

body{ 
    margin: 0 !important; 
} 
nav{ 
    height: 60px; 
    width: 100%; 

    display: flex; 
    justify-content: center; 
    align-items: center; 

    background-color: rgb(21, 138, 194); 
} 
nav > a{ 
    margin: 0 1em; 

    display: flex; 

    color: #036088; 
    text-transform: capitalize; 
    text-decoration: none; 
} 
nav > a:hover{ 
    color: white; 
}

источник

2016-09-16 19:33:00

В вашем CSS вы можете установить границу своей страницы равной 0, создав элементы на самой границе страницы.

Добавить, как показано ниже:

*{ 
margin:0px; 
}

Это установит все содержание страницы с 0 краем. Селектор * соответствует каждому элементу вашей html-страницы.

источник

2016-09-16 18:38:39 Claiohm

Установите свойство «vertical-align» на изображении в навигационной панели на «среднее».

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

Эта ссылка описывает, как по вертикали выравнивания свойство работает https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

.abc { 
 
    width:600px; 
 
    height:120px; 
 
    background-color:yellow; 
 
    display:inline-block; 
 
} 
 
ul { 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 

 
ul li { 
 
    display:inline; 
 
    font-size:24px; 
 
} 
 

 
/* THIS IS THE ONLY NEW CODE */ 
 
.abc img { 
 
    vertical-align: middle; 
 
}

<body> 
 
    <div class="abc"> 
 
    <img src="http://lorempixel.com/400/200/" width="180" height="120" /> 
 
    <ul> 
 
     <li><a href="www.quora.com">Home</a></li> 
 
     <li><a href="www.quora.com">gallery</a></li> 
 
     <li><a href="www.quora.com">about us</a></li> 
 
     <li><a href="www.quora.com">contact</a></li> 
 
    </ul> 
 
    </div> 
 
</body>

источник

2016-09-16 18:48:14

То, что я обычно делаю захват элементов страницы в пределах Div теги и играть с полями ...

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 

.bar{ 
    margin-left: 150px; 
    margin-top: -95px; 
} 

.abc { 
    width:600px; 
    height:120px; 
    background-color:yellow; 
    position:absolute; 
    display:inline-block; 
} 
ul{ 
    position:relative; 
    display:inline-block; 
} 
ul li { 
    display:inline; 
    font-size:24px; 
} 
    </style> 
    </head> 
    <body> 
    <div class="abc"> 
    <div class="Image"><img src="../../../Desktop/254014_208382935867586_7113053_n.jpg" width="180" height="120" /></div> 
    <div class="bar"> 
    <ul > 
    <li><a href="www.quora.com">Home</a></li> 
    <li><a href="www.quora.com">gallery</a></li> 
    <li><a href="www.quora.com">about us</a></li> 
    <li><a href="www.quora.com">contact</a></li> 
    </ul> 
    </div> 
    </div> 
    </body> 
    </html>

хотите что-то вроде этого правильно? :) коробка модель

источник

2016-09-16 18:50:54 TwoDent

Как я могу воспользоваться этой навигационной панелью?

ответ

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