@Frendy

Как мне сделать выравнивание логотипа и меню в одну строку?

С помощью inline-block я сделал обычное меню для сайта, также я добавил text-align: center; для того чтобы выровнять его по центу страницы. Мне нужно добавить логотип в левой части меню и выровнять его на одном уровне с элементами меню, когда я это делаю с помощью float: left; происходит смещение и компонентов в меню в правую часть. Мне нужно сделать так, чтобы меню оставалось в центре.

Это заметно на скриншотах
5c51e5701c3ce856193641.png5c51e576c8e99082020002.png
<header class = "top_menu">
              <a id = "logo" href="test"><img src="images/left.png"/></a>
    			<ul>
    				<li><a href="test">TTT</a></li>
    				<li><a href="test">TTTR</a></li>
    				<li><a href="test">TT</a></li>
    				<li><a href="test">TTT</a></li>
    			</ul>
</header>


header{
	    display: block;
	    text-align: center;
	    background-color: #707070;
	    box-shadow: 1px 2px 3px 1px #999999;
	    margin: 0;
	    width: 100%;
	    z-index: 2;
	    position: fixed;
	    top: 0;
	    max-height: 45px;
	    overflow: hidden;}
        .top_menu ul{
	    padding: 0;
	    margin: 0;
    }
    .top_menu li{
        width: auto;
        height: 45px;
	    display: inline-block;
	    background-color: #707070;
	    list-style-type: none;
	    padding-left: 20px;
	    padding-right: 20px;
    }
    .top_menu a{
	    color: #ededed;
	    text-decoration: none;
	    display: block;
	    padding-top: 14px;
	    font-family: arial;
	    font-size: 17px;
	    text-align:  center;
    }
    #logo {
	    display: inline-block;
	    width: 40px;
	    height: 40px;
	    float: left;
	    padding: 4px;
    }
  • Вопрос задан
  • 5222 просмотра
Решения вопроса 1
iDevArtem
@iDevArtem
#logo {
      position: absolute;
      width: 40px;
      height: 40px;
      left: 0;
      top: 0;
      padding: 4px;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы