h3 и a в один ряд (Bootstrap, CSS)

266

07 апреля 2017, 22:32

Доброй ночи! Я разбираюсь с Bootstrap'ом и не могу понять, поставил h3 и a

Разметка:

<body>
    <div id="header">
        <div id="rightsidemenu" class="col-md-10 col-md-offset-9">
            <ul>
                <li><a class="onhead" href="#">Вход</a></li>
                <li><a class="onhead">|</a></li>
                <li><a class="onhead" href="#">Регистрация</a></li>
            </ul>
        </div>  
        <div id="center" class="col-md-5 col-md-offset-4">
            <h3 class="main">Все заявки и поставщики в одном месте!</h3>
        </div>
    </div>
</body>

CSS:

a.onhead{
  text-decoration: none;
  color: #000;
  }
  a.onhead:hover{
  color: #a9aaac;
  transition: 1s;
  }
  li {
  display: inline;
  list-style-type: none;
  }
  h3.main{
  display: inline;
  text-decoration: none;
  }

Как сделать их в один ряд? Никак не могу понять :D

Answer 1

У Вас изначально не правильная html структура.

Пример как лучше оформить:

a.onhead{ 
  text-decoration: none; 
  color: #000; 
   
  display: block; 
  padding: 5px 0; 
} 
 
a.onhead:hover{ 
  color: #a9aaac; 
  transition: 1s; 
} 
 
h3.main{ 
  display: inline; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<div class="container"> 
  <div id="header"> 
    <div class="row"> 
      <div id="rightsidemenu" class="col-md-3 col-md-push-9"> 
        <ul class="list-inline"> 
          <li><a class="onhead" href="#">Вход</a></li> 
          <li><a class="onhead">|</a></li> 
          <li><a class="onhead" href="#">Регистрация</a></li> 
        </ul> 
      </div>   
      <div id="center" class="col-md-9 col-md-pull-3"> 
        <h3 class="main">Все заявки и поставщики в одном месте!</h3> 
      </div> 
    </div> 
  </div> 
</div>

и тогда для того чтобы выровнять на одном уровне заголовок и список, достаточно будет добавить отступы (padding) для ссылок или li или ul (это уже как пожелаете, я задала для ссылок для примера), либо задать line-height.

Answer 2

Примерно так (можно настраивать расположение по необходимости), с использованием push и pull:

<body>
    <div id="header">
        <div id="rightsidemenu" class="col-md-7 col-md-push-9">
            <ul>
                <li><a class="onhead" href="#">Вход</a></li>
                <li><a class="onhead">|</a></li>
                <li><a class="onhead" href="#">Регистрация</a></li>
            </ul>
        </div>  
        <div  class="col-md-5 col-md-pull-3">
            <h3 class="main">Все заявки и поставщики в одном месте!</h3>
        </div>
    </div>
</body>

Сумма числовых значений соответствующих колонок не должна превышать 12, иначе возможны варианты (каждый свободен проэкспериментировать). http://www.bootply.com/ofsU7W532Y