Ширина блока с width или без

252
22 февраля 2019, 02:20

у меня есть тривиальный вопрос по поводу верстки. Есть такой код для навигации. Мне из студии заверили что такой подход не правильный надо menu и social-link дать 50% ширины.

Я хотел бы узнать у вас. Есть какая то разница?

.navigation{
           width:100%;
           padding:15px;
           display:flex;
           justify-content:space-between;
           align-items:center;
           box-sizing:border-box;
}
 .menu{
          display:inline-block;
          padding:15px;
          text-align:center;
          box-sizing:border-box;
   }
.social-link{
          display:inline-block;
          padding:15px;
          text-align:center;
          box-sizing:border-box;
 }
 .link{
       display:block;
       padding-left:15px;
       padding-right:15px;
      }
  .facebook::after{
       content:"facebook";
       font-size:1rem;
       font-family:material-icon;
  }
     .twitter::after{
       content:"twitter";
       font-size:1rem;
       font-family:material-icon;
  }

<nav class="navigation">
     <menu class="menu">
          <a href="" class="link">Home</a>
           <a href="" class="link">About</a>
             <a href="" class="link">Service</a>
                <a href="" class="link">Contact</a>
     </menu>
        <div class="social-link">
           <a href="" class="link facebook">Facebook</a>
           <a href="" class="link twitter">Twitter</a>
        </div>
</nav>
Answer 1

Если их просто вставить как есть, то их ширина будет зависеть от padding, в вашем случае ширина будет равна 30px (padding-left: 15px; + padding-right: 15px;)

.menu { 
  background: red; 
   
  display: inline-block; 
  padding: 15px; 
  text-align: center; 
  box-sizing: border-box; 
} 
 
.social-link { 
  background: blue; 
   
  display: inline-block; 
  padding: 15px; 
  text-align: center; 
  box-sizing: border-box; 
}
<div class="menu"></div> 
<div class="social-link"></div>

Если нужно, чтобы данные блоки были в ширину всего родительского элемента, то люди из студии сказали правильно, что блоки должны иметь width: 50%, но т.к. это инлайн блоки, они ещё должны иметь float: left; (в связи фичи или бага, хз).

.menu { 
  background: red; 
   
  display: inline-block; 
  padding: 15px; 
  text-align: center; 
  box-sizing: border-box; 
} 
 
.social-link { 
  background: blue; 
   
  display: inline-block; 
  padding: 15px; 
  text-align: center; 
  box-sizing: border-box; 
} 
 
.menu, .social-link { 
  float: left; 
  width: 50%; 
}
<div class="menu"></div> 
<div class="social-link"></div>

READ ALSO
Как убрать левую границу у пункта списка?
HTML

Как убрать левую границу у пункта списка?

Помогите, не могу убрать левую границу у пункта nth-child(1) не помогает

 243
цикл for в freemarker
HTML

цикл for в freemarker

есть две сущности: спортсмены и их бои, нужно попарно выводить записи кто с кем деретсяРеализовал две сущности в отношении @ManyToMany формирую...

 317
Бургер меню jQuery не выпадает
jQuery

Бургер меню jQuery не выпадает

Никак не хочет меню выходитьКогда меняешь transform: translateX(100%); вылазит, в скрипте все прописала,но все равно не работает,при клике меню не опускается,но...

 250
Как реализовать такое на jQuery?
jQuery

Как реализовать такое на jQuery?

Всем приветНаткнулся на этот сайт https://kin

 281