Проблема в том, что когда я задаю стиль тегу <a> для списка в нижнем колонтитуле, ничего не происходит, даже если он настроен правильно для применения стиля. Но если я добавлю отступ к форме в основной части кода, внезапно изменение отобразится на ссылках в нижнем колонтитуле.

Я предоставил JSfiddle (https://jsfiddle.net/wk47q0en/), просто перейдите к строке 56 в CSS и закомментируйте / удалите случайные отступы, которые были добавлены в форму, и стиль нижнего колонтитула исчезнет. Мне интересно, почему это происходит.

И если вам интересно, да, я новичок в HTML и CSS, это часть домашней работы: D заранее спасибо за любой совет, который поможет прояснить это.

https://jsfiddle.net/wk47q0en/

HTML

 <meta charset="utf-8">
    <title>Red Pepper Pizza</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <div class="topmenu">
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Weekly deals</a></li>
          <li><a href="#">Resturants</a></li>
          <li><a href="#">Contact us</a></li>
        </ul>
      </nav>
  </div>

  <form action="example.htm" method="get">
    <fieldset>
      <legend>Order your pizza below</legend>
      <select name="Pizza" id="Pizza">
        <option value="selected" selected>Choose a pizza</option>
        <option value="Pepperoni">Pepperoni</option>
        <option value="Ham">Ham</option>
        <option value="Vegan">Vegan</option>
        <option value="Margarita">Margarita</option>
      </select>

      <p>Choose your Pizza crust</p>
      <input type="radio" name="Crust" value="Thick"> Thick
      <input type="radio" name="Crust" value="Thin"> Thin

      <p>Extra toppings</p>
      <input type="checkbox" name="Toppings" value="Onions"> Onions
      <input type="checkbox" name="Toppings" value="Salmon"> Salmon
      <input type="checkbox" name="Toppings" value="Garlic"> Garlic
      <input type="checkbox" name="Toppings" value="Olives"> Olives
      <input type="checkbox" name="Toppings" value="Chilli"> Chilli
      <input type="checkbox" name="Toppings" value="Peppers"> Peppers

      <textarea name="comment" rows="8" cols="62"> Additional specifications...</textarea> <br>

      <input type="submit" name="order" value="order">
      </fieldset>
  </form>

    <footer>
        <div class="footermenu">
           <ul class="footlist">
             <li><a href="#">Contact us</a></li>
             <li><a href="#">Privacy</a></li>
             <li><a href="#">Job oppertunities</a></li>
             <li><a href="#">Allergens</a></li>
             <li><a href="#">Blog</a></li>
           </ul>
       </div>
      </footer>
      </body>
    </html>

CSS

    /* body etc */
    @font-face {
    font-family: 'Roboto', sans-serif;
    src: url(assets\RobotoFont\Roboto-Regular.ttf);
    }

    body {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0px 10px;
    }

    /* Navigation/topbar/sidebar */

    ul {
      margin: 0px 0px 0px 0px;
      list-style-type: none;
    }

    li {
      display: inline;
    }


    .topmenu {
      width: 100%;
      background-color: #d12d17;
      height: 40px;
      text-align: center;
      margin-top: 0px;
      padding-top: 0px;
    }


    .topmenu a {
      display: inline-block;
      height: 40px;
      color: black;
      text-decoration: none;
      font-size: 19px;
      font-weight: bold;
      padding: 10px 25px;

    }

    .topmenu a:hover {
      transform: scale(1.3); }
    }


    /*Header and intro*/




    /* Form elements*/

    form {
      padding: 0 50%;
    }



/*footer */

.footlist a {
  display: inline-block;
  height: 40px;
  color: black;
  text-decoration: none;
  font-size: 15px;
}
1
Himano 19 Окт 2019 в 18:42

1 ответ

Лучший ответ

Ошибка в вашем коде CSS в строке 48. У вас есть лишняя фигурная скобка. Когда вы стилизуете элемент формы в строке 58, значение фактически не применяется из-за ошибки, но стили более поздних элементов работают правильно. Когда вы извлекаете стиль элемента формы, ошибка затрагивает элемент, который стилизован сразу после него, а именно элемент a в нижнем колонтитуле.

1
craft9861 19 Окт 2019 в 17:18