Как мне сделать мою строку меню, чтобы заполнить ширину экрана? - PullRequest
Новая
       1

Как мне сделать мою строку меню, чтобы заполнить ширину экрана?

0 голосов
/ 31 августа 2018

Это мой школьный проект: http://sleepybear.ml

Я создал меню, используя <ul> и <li>

Я хочу сделать цвет фона меню, чтобы заполнить ширину страницы

Мой индекс и styles.css: https://codepen.io/anon/pen/bxgmzq

Мой css для меню: 

ul.menu {
    width: 100%;
    white-space: nowrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
    margin-bottom: 40px;
}

И меню в html: 

    <ul class="menu">
        <li class="menu"><a href="index.html">HOME</a></li>
        <li class="menu"><a href="news.html">NEWS</a></li>
        <li class="menu"><a href="#contact">CONTACT</a></li>
        <li class="menu"><a href="#forum">FORUM</a></li>
    </ul>

1 Ответ

0 голосов
/ 31 августа 2018

Просто примените margin: 0 к <body> как: 

ul.menu {
  width: 100%;
  white-space: nowrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  margin-bottom: 40px;
}
body {
  margin: 0;
}
<body>
  <ul class="menu">
    <li class="menu"><a href="index.html">HOME</a></li>
    <li class="menu"><a href="news.html">NEWS</a></li>
    <li class="menu"><a href="#contact">CONTACT</a></li>
    <li class="menu"><a href="#forum">FORUM</a></li>
  </ul>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...