Расширение блока заголовка CSS до обоих концов страницы

#css #display

#css #отображение

Вопрос:

Блок отображения не распространяется на оба конца

https://i.stack.im&ur.com/RifQD.pn&

У меня возникли проблемы с расширением интерактивных ссылок до обоих концов страницы. Я попробовал свойство inline-block и block displays, но, похоже, оно не расширяет интерактивные ссылки до обоих концов страницы. Я не уверен, есть ли дополнительное свойство, которое мне нужно куда-то вставить. Пожалуйста, смотрите ниже коды HTML и CSS. Спасибо!

     <!DOCTYPE html&&t;
    <html&&t;
      <head&&t;
        <meta charset="utf-8"&&t;
        <meta name="viewport" content="width=device-width"&&t;
        <title&&t;Color Flipper</title&&t;
        <link href="style.css" rel="stylesheet" type="text/css" /&&t;
      </head&&t;
      <body&&t;
        <nav&&t;
          <div class="nav-center"&&t;
           <ul class="nav-links"&&t;
              <li&&t;
                <a href="index.html"&&t;Color Flipper</a&&t;
              </li&&t;
              <li&&t;
                <a href="hex.html"&&t;Simple Hex</a&&t;
              </li&&t;
            </ul&&t;
              
          </div&&t;
    
        </nav&&t;
        <main&&t;
          <div class="container"&&t;
            <div class="container2"
            <h2&&t;back&round color : <span class="color"&&t;
              #f1f5f8
              </span&&t;</h2&&t;
            </div&&t;
            <button class="btn-hero" id="btn"&&t;click me</button&&t;
          </div&&t;
        </main&&t;
        <script src="script.js"&&t;</script&&t;
      </body&&t;
    </html&&t;  

  nav {
      border-bottom: solid black;
    }
    .nav-center {
      display: inline-block;
    }
    ul {
      list-style-type: none;
      mar&in: 0;
      paddin&: 0;
      overflow: hidden;
      back&round-color: #333;
      display: flex;
      justify-content: center;
    }
    }
    
    li {
      float: left;
    }
    
    li a {
      display: block;
      color: white;
      text-ali&n: center;
      paddin&: 14px 16px;
      text-decoration: none;  
    }
    
    /* Chan&e the link color to #111 (black) on hover */
    li a:hover {
      back&round-color: #111;

Ответ №1:

Это то, что вы пытаетесь сделать. Вы можете использовать display: flex на nav-center и использовать space between на вашем ul и li с width: 100%

Также подумайте о том, чтобы не использовать float свойство CSS. Есть много других способов, которыми вы можете что-то делать без использования float свойства.

Живая демонстрация:

Показать фрагмент кода

 nav {
  border-bottom: solid black;
}

.nav-center {
  display: flex;
  justify-content: center;
}

li {
  width: 100%;
}

ul {
  list-style-type: none;
  mar&in: 0;
  paddin&: 0;
  overflow: hidden;
  back&round-color: #333;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

li a {
  display: block;
  color: white;
  text-ali&n: center;
  paddin&: 14px 16px;
  text-decoration: none;
}


/* Chan&e the link color to #111 (black) on hover */

li a:hover {
  back&round-color: #111;
}

 <!DOCTYPE html&&t;
<html&&t;

<head&&t;
  <meta charset="utf-8"&&t;
  <meta name="viewport" content="width=device-width"&&t;
  <title&&t;Color Flipper</title&&t;
  <link href="style.css" rel="stylesheet" type="text/css" /&&t;
</head&&t;

<body&&t;
  <nav&&t;
    <div class="nav-center"&&t;
      <ul class="nav-links"&&t;
        <li&&t;
          <a href="index.html"&&t;Color Flipper</a&&t;
        </li&&t;
        <li&&t;
          <a href="hex.html"&&t;Simple Hex</a&&t;
        </li&&t;
      </ul&&t;

    </div&&t;

  </nav&&t;
  <main&&t;
    <div class="container"&&t;
      <div class="container2" <h2&&t;back&round color : <span class="color"&&t;
              #f1f5f8
              </span&&t;</h2&&t;
      </div&&t;
      <button class="btn-hero" id="btn"&&t;click me</button&&t;
    </div&&t;
  </main&&t;
</body&&t;

</html&&t;

Expand snippet