Css заголовок с тремя divs бок о бок отзыв

-1

Я создал этот простой заголовок и задавался вопросом, является ли это хорошим способом поставить divs бок о бок? Также я правильно центрирую divs или должен использовать пиксели для ширины вместо процентов?Css заголовок с тремя divs бок о бок отзыв

Живая демо здесь: https://jsfiddle.net/d4v91ekb/

a { 
 
    text-decoration:none; 
 
} 
 
.container { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    max-width: 1200px; 
 
    box-sizing: border-box; 
 
} 
 
.row { 
 
    overflow:hidden; 
 
} 
 
.header { 
 
    padding: 8px 8px 32px 8px; 
 
    background: #FFCA00; 
 
    height: 200px; 
 
} 
 
.logo { 
 
    background: url('https://placehold.it/200x200') no-repeat; 
 
    background-size: 100px 100px; 
 
    width:100px; 
 
    height:100px; 
 
    text-indent:-100%; 
 
    float:left; 
 
    display:inline-block; 
 
} 
 
.siteName { 
 
    display:inline-block; 
 
    margin-top: 40px; 
 
    font-size: 15pt; 
 
    color: white; 
 
    font-weight: bold; 
 
    float:left; 
 
} 
 

 
.mainNav { 
 
    float:left; 
 
    display:inline-block; 
 
    width:50%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-transform: uppercase; 
 
    margin-top: 25px; 
 
} 
 
.mainNav ul{ 
 
     list-style-type: none; 
 
     text-align: center; 
 
    } 
 
.mainNav ul li{ 
 
     display:inline; 
 
    } 
 
.mainNav ul li a{ 
 
     color:#fff; 
 
     padding: 5px; 
 
    } 
 
.mainNav ul li a:hover{ 
 
     padding: 5px; 
 
     border-bottom:2px solid #fff; 
 
    } 
 
.mainNav .current{ 
 
     padding: 5px; 
 
     color:black; 
 
     border-bottom:2px solid #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header id="header" class="header"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
      
 
       <a href="index.html" title=""><div class="logo"></div></a> 
 
       <a href="index.html" title=""><div class="siteName">Site full name here</div></a> 
 
       
 
      <nav class="mainNav"> 
 
       <ul> 
 
        <li class="current"><a href="" title="">Menu 01</a></li> 
 
        <li><a href="" title="">Menu 02</a></li> 
 
        <li><a href="" title="">Menu 03</a></li> 
 
        <li><a href="" title="">Menu 04</a></li> 
 
       </ul> 
 
      </nav> 
 
      
 
      </div> 
 
     </div> 
 
    </header><!-- /header -->

источник

2016-12-12 lyraX

Что вы хотите сказать? Пожалуйста, уточните, что вы хотите? –

@SantoshKhalse на моем компьютере меню не центрируется и справа от имени сайта, а не центра. Поэтому мне было интересно, если это только для моего компьютера или есть некоторая ошибка в коде, почему его не посередине. – lyraX

Я не уверен, что SO - лучшее место, чтобы получить обзоры кода. Возможно, [Code-Review-Community] (http://codereview.stackexchange.com/) лучше подходит для этого;). В любом случае, когда поддержка (вроде очень) старых браузеров не является строгим требованием, я бы предпочел позиционирование «flex-box» на плавающие макеты. – lupz

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

.mainNav { 
    width: 50%; 
    text-transform: uppercase; 
} 

.mainNav ul { 
    display: flex; 
    list-style-type: none; 
    text-align: center; 
} 

.mainNav ul li { 
    flex-grow: 1; 
}

См the fiddle

Редактировать 1

Если вы хотите, чтобы выровнять меню в отдельной строке, чем заголовок, используйте следующий код (логотип сайта и имя заворачивают в делах. название)

#header .row{ 
    display: flex; 
    flex-direction: column; 
} 
.mainNav { 
    display: block; 
    width: 75%; 
    margin: 0 auto; 
    text-transform: uppercase; 
} 

.mainNav ul { 
    display: flex; 
    list-style-type: none; 
    text-align: center; 
    padding: 0; 
}

Пожалуйста, см this fiddle

источник

2016-12-12 09:02:26

Используйте контейнер класс display:block;

.container { 
    width: 100%; 
    margin: 0 auto; 
    max-width: 1200px; 
    box-sizing: border-box; 
    display:block; 

}

Если вы хотите проверить, уменьшить ширину до 50% и проверить это работает.

Example fiddle

источник

2016-12-12 09:40:25

js скрипка: https://jsfiddle.net/d4v91ekb/4/ –

Css заголовок с тремя divs бок о бок отзыв

ответ

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