<header> элемент не с плавающей правой навигационной панелью - PullRequest
Новая
       5

<header> элемент не с плавающей правой навигационной панелью

1 голос
/ 19 марта 2020

Я не уверен, почему мой элемент заголовка с навигацией не будет плавать вправо с "float: right;"

Я только начинаю работать с html & CSS Я надеялся, что кто-то может помочь заставить мою навигационную панель всплыть направо. Я посмотрел пару видео и переполнения стека, но я не уверен, что не так, я только начал искать несколько вещей, чтобы начать с bootstrap, W3 и некоторых других сайтов.

мой код ниже 

*,
html,
body {
  margin: 0;
  padding: 0;
}

header {
  background-color: deepskyblue;
}

ul {
  list-style: none;
}

ul li {
  display: inline-block;
}

header nav {
  float: right 1;
}

header nav ul li a {
  padding-right: 30px;
  font-weight: bold;
  color: white;
  transition: all 0.5s ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<header>
  <div class="container">
    <div class="row">
      <!-- <a href="" class="logo" > <img src="images/linkedin_logo.png" alt="Image" height="42" width="42"></a> -->
      <nav>
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Work</a></li>
          <li><a href="">Services</a></li>
          <li><a href="">Clients</a></li>
          <li><a href="">Our Team</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>

    </div>
    <p>This is some text.</p>
  </div>
</header>

Ответы [ 2 ]

0 голосов
/ 19 марта 2020

Здесь класс Bootraps .row добавляет flex-блок к div, который в терминах блокирует float вправо css. Свойство float игнорируется во флекс-контейнере.

Из спецификации флексбокса:

Флекс-контейнер устанавливает новый контекст форматирования флекс для своего содержимого. Это то же самое, что и установление контекста форматирования блока, за исключением того, что вместо макета блока используется гибкий макет. так что float не создает плавающий элемент или зазор для гибкого элемента.

enter image description here

удалите класс .row, и ваш стиль float должен начать работать!

0 голосов
/ 19 марта 2020

Просто удалите элемент container. 

*, html, body
{
    margin: 0;
    padding: 0;
}

header
{
    background-color: deepskyblue;
}


ul
{
    list-style: none;
}

ul li{
    display: inline-block;
}

header nav 
{
    float: right;
}

header nav ul li a
{
    padding-right: 30px;
    font-weight: bold;
    color: white;

    transition: all 0.5s ease-in-out;
}
<!DOCTYPE html>

<html>
<head>
    <title>Website Project</title>

    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>

      <div class="row">
                    <!-- <a href="" class="logo" > <img src="images/linkedin_logo.png" alt="Image" height="42" width="42"></a> -->
            <nav>
               <ul>
                  <li><a href="">Home</a></li>
                  <li><a href="">Work</a></li>
                  <li><a href="">Services</a></li>
                  <li><a href="">Clients</a></li>
                  <li><a href="">Our Team</a></li>
                  <li><a href="">Contact</a></li>
               </ul>
            </nav>

        </div>
        <p>This is some text.</p>
            
</header>


</body>
</html>
...