Почему моя ссылка на выход из системы выходит за пределы экрана?

Question

Я пытаюсь выровнять навигационные ссылки справа от заголовка моего раздела. Итак, я создал

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">My Subscriptions</a></li>
            <li><a href="#">Help</a></li>
            <li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li>
          </ul>

и добавил этот стиль

header ul {
  float: right;
  list-style: none;
}

header ul li {
  float: left;
  margin-left: 15px;
}

Но моя ссылка "Выйти" выходит за пределы экрана - https://jsfiddle.net/p2rwgfjc/. Как я могу изменить это так, чтобы весь текст оставался на экране?

Answer 1

Просто добавь margin-right: 15px на ваш header ul,

header ul {
  float: right;
  list-style: none;
  margin-right: 15px;
}

Скрипка: https://jsfiddle.net/og165aky/

Answer 2

Причина заключается в том, что ширина блока включает отступы по умолчанию, и вы установили ширину заголовка 100%, поэтому общая ширина заголовка превышает 100% и выходит за пределы экрана. Таким образом, вы должны очистить поля по умолчанию и отступы блока. Наиболее удобный способ - * {padding: 0, margin: 0}. Я надеюсь, что этот ответ может помочь вам!

Answer 3

1. забудь о поплавке.
2. следите за шириной вашей обертки.
3. используя flex на вашей обертке.
4. используя flex на вашем UL.

header{
    box-shadow: none;
    background: #44505d;
    border-bottom: none;
    height: 73px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
}

.wrapperLogo{
width:30%;}

header nav{
width:70%;}


#logo {
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}


#logo:hover {
  color: #fff;
  text-decoration: none;
}

header ul {
  list-style: none;
  display:flex;
  justify-content:space-around;
}

<header id="branding" class="clearFix">
  <div class="wrapperLogo">
    <a id="logo" href="#">sample app</a>
  </div>
 <nav>
   <ul class="nav navbar-nav navbar-right">
    <li><a href="#">My Subscriptions</a></li>
    <li><a href="#">Help</a></li>
    <li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li>
   </ul>
 </nav>
</header>

это не идеально, да, конечно. Вам также нужно изменить мобильное представление. как шрифт и ширина и высота. и т.п.

посмотри на это

 header ul {
      list-style: none;
      display:flex;
      justify-content:space-around;
    }

Вы можете изменить его без обоснованного содержания или вы также можете удалить его и изменить его с помощью предыдущего CSS header ul li {margin-left:15px}

Answer 4

Я думаю, что когда вы перемещаете что-то, вы должны также перемещать его родителя, в противном случае элемент, который вы поместили, покидает структуру других элементов html и становится отдельным элементом, плавающим вокруг.

Так что плавающий родительский элемент и дать ему плавающий элемент none или наследовать.