Как выровнять логотип слева и навигация с правой стороны?

-1

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

Мой HTML-код:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link rel="icon" type="image/png" href="SENCOR_Logo.ico"> 
<title>SENCOR</title> 
</head> 
<body> 
<div class="bg-div"> 
    <img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER> 
    <nav> 
     <ul> 
      <li><a href="#">Monitoring</a></li> 
      <li><a href="#">Process</a></li> 
      <li><a href="#">Post and Create Email/Excel</a></li> 
      <li><a href="#">Reports</a></li> 
      <li><a href="#">Tools</a></li> 
      <li><a href="#">Sales</a></li> 
     </ul> 
    </nav> 
</div> 
</body> 
</html>

и мой style.css Heres код:

body{ 
    margin: 0; 
    padding: 0; 
    font-size: 15px; 
} 

/* Navigation */ 
nav{ 
    margin: 0; 
    overflow:hidden; 
    text-align: center; 
} 

nav ul{ 
    margin: 0; 
    padding: 0; 
} 

nav ul li{ 
    display: inline-block; 
    list-style-type: none; 
} 

nav > ul > li > a{ 
    color: #aaa; 
    display: block; 
    line-height: 2em; 
    padding: 0.5em 1em; 
    text-decoration: none; 
} 
----------- 
.logo-img{ 
    position: relative; 
    margin: 10px 15px 15px 10px; 
} 
.bg-div{ 
    background:#333; 
}

Я хочу, чтобы отобразить логотип на левой стороне и навигационной панели с правой стороны.

источник

2016-01-29 Emz1402

Вот ручка:

http://codepen.io/toddmoore/pen/JGvVpB

.logo-img { 
    float: left; 
    position: relative; 
    margin: 10px 15px 15px 10px; 
} 
.bg-div { 
    overflow: hidden; 
} 
nav { 
    float: left; 
}

Я предполагаю, что вы хотите их установить традиционным способом. Если вы хотите, чтобы навигатор находился на противоположной стороне страницы float, он right.

Вы также можете реализовать это с помощью flex, но пока я буду придерживаться float, если вы новичок в css.

overflow hidden позволяет контейнеру двух плавающих элементов расширяться до их высоты, иначе, поскольку поплавки уходят из потока документа, контейнер разрушается.

источник

2016-01-29 03:46:39

спасибо .. Я стараюсь код, который вы мне дали, но результат в том, что логотип перезаписи панели навигации .. поэтому я изменить код в навигационном поплавке: левый ; плавать: справа; – Emz1402

Вам нужно указать размеры 'height' и' width' логотипа, я установил их в моем примере, который я вам дал, вы должны установить эти значения независимо от 'высоты' и' width' вашего логотипа. Совершенно верно установить их в атрибутах тега изображения или вы можете установить их в своем классе .logo-img. –

да .. спасибо .. я получил его сейчас .. – Emz1402

Самый простой и самый простой ответ - использовать поплавки.

.logo-img { 
    float: left; 
} 
nav { 
    float: right; 
}

источник

2016-01-29 03:49:22 hungerstar

Как правило, лучше использовать «положение: зафиксировано»; для навигационных баров сверху. Таким образом, ваш CSS можно сделать так:

.logo-img{ 
    position: fixed; 
    margin: 10px 15px 15px 10px; 
    left: 0; 
    display:inline; 
} 

.bg-div{ 
    background:#333; 
    height: 50px; 
} 

.bg-div nav { 
    position: fixed; 
    display:inline; 
    right: 0; 
}

источник

2016-01-29 03:52:44

Как выровнять логотип слева и навигация с правой стороны?

ответ

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