Прикладной CSS вызывает непривязку якорей - PullRequest
Новая
       9

Прикладной CSS вызывает непривязку якорей

0 голосов
/ 27 сентября 2019

Я столкнулся с очень странной проблемой, я заметил, что мои якоря внезапно перестали работать, потому что они стали не щелкаемыми.Затем я решил, что это должно быть что-то, связанное с прикладным CSS, и когда я начал отключать части моего CSS, я сузил проблему до этой пары строк: 

.content {
    width: 960px;
    margin: auto;
}

Моя структура страницы выглядит следующим образом: 

<!DOCTYPE html>
<html>
  <head>
    <title>CoinShop v1.0</title>
    <link rel="stylesheet" type="text/css" href="/static/pages/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/pages/css/navbar.css">
    <link rel="stylesheet" type="text/css" href="/static/pages/css/base.css">
    <link rel="stylesheet" type="text/css" href="/static/pages/css/searchbar.css">
    <link rel="stylesheet" type="text/css" href="/static/pages/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/products/css/detail.css">
  </head>
  <body>
    <div class='top-grid'>
      <div class='branding-grid-container'>
        <div class='branding-grid'>
          <div class='branding-grid-buttons-not-authenticated'>
            <a href="/help/" class='button-help'>Help</a>
            <a href="/accounts/register/" class='button-register'>Register</a>
            <a href="/accounts/login/" class='button-login'>Login</a>
          </div>
        </div>
      </div>
      <div class='nav-grid'>
        <div class='search-bar'>
          <form action="/shop/" method="GET">
            <input type="text" name="q" placeholder="Search" class='search-box'>
            <input type="submit" value='Search' class='search-button'>
          </form>
        </div>
        <div class='nav-bar'>
          <nav>
            <ul id='menu'>
              <li class='menu-item'><a href="/">Home</a></li>
              <li class='menu-item'><a href="/shop">Shop</a></li>
              <li class='menu-item'><a href="/contact">Contact</a></li>
              <li class='menu-item'><a href="/about">About</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <div class='content'>
      <a href="/shop/1/">spam (2018)</a>
      <h1>spam (2018)</h1>
      <p>eggs</p>
      <p>Price: 200.00</p>
    </div>
  </body>
</html>

... и все примененные CSS в совокупности выглядит следующим образом: 

.top-grid {
    margin: auto;
    background-color: #3D005A;
}

.branding-grid-container {
    background-color: #4e0e7c;    
}

.branding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 400px;
    height: 6em;    
    background-color: #4e0e7c;
    margin: auto;
    width: 960px;
}

.branding-grid-buttons-not-authenticated {
    margin-top: 40px;
    grid-column: 3;
    width: 100%;
    text-align: right;
}

.branding-grid-buttons-not-authenticated a {
    border-style: solid;
    border-radius: 0.5em;
    border: none;
    color: white;
    font-size: 14px;
    padding: 10px 20px;
    margin-right: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

.button-help {
    background-color: #36c1d4;
}

.button-help:hover {
    background-color: #2a99a8;
}

.button-register {
    background-color: #FF9900;
}

.button-register:hover {
    background-color: #FF6600;
}

.button-login {
    background-color: #75C10A;
}

.button-login:hover {
    background-color: #62a307;
}

.branding-grid-buttons-not-authenticated a:hover {
    color: white;
    text-decoration: none;
}

.branding-grid-buttons-authenticated {
    margin-top: 50px;
    grid-column: 3;
    text-align: right;
}

.buttons-authenticated li {
    display: inline-block;
    padding-right: 20px;
}

.buttons-authenticated li a {
    color: white;
}

.buttons-authenticated li a:hover {
    color: #EC9419;
}

.nav-grid {
    background-color: #3D005A;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    width: 960px;
    height: 2.7em;
}

.search-bar {
    margin-top: 6px;
}

.nav-bar {
    margin-top: 5px;
    margin-bottom: 30px;
    text-align: right;
}

.above-form {
    background-color: #f5f3f2;
    color: #FF6600;
    margin-bottom: 15px;
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.error-wrapper {
    background-color: #F2DEDE;
    padding: 10px 20px;
    margin-bottom: 15px;
    color: #a94442;
    font-size: 14px;
}

.close-button {
    border: none;
    background-color: #F2DEDE;
    color: #a94442;
    font-size: 21px;
    font-weight: bold;
    padding: 0;
}

.close-button:hover {
    color: #685863;
}
ul#menu {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu-item {
    display: inline-block;
}

.menu-item > a {
    float: left;
    display: block;
    padding: 0px 10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    min-width: 80px;
    text-decoration: none;
}

.menu-item > a:hover {
    color: #EC9419;
    text-decoration: none;
    max-height: 30px;
}

.search-bar form { font-size: 0; }

.search-bar input {
    display: inline-block;
    height: 2em;
    box-sizing: border-box;
    font-size: 1rem;
}

.search-box {
    border: none;
    padding-left: 10px;
    border-radius: 0.5em 0 0 0.5em;
}

.search-button {
    background-color: #FF9900;
    border-radius: 0 0.5em 0.5em 0;
    border: none;
    color: white;
    padding: 0px 15px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

.search-button:hover {
    background-color: #FF6600;
}

.search-bar {
    top: 0;
    bottom: 0;    
}

.content {
    width: 960px;
    margin: auto;
}

Вот скрипка JS .

Зачем этопара строк вызывает такую ​​проблему?Это никогда не случалось со мной раньше.Удаление скрипки из этих двух строк не решает проблему, в то время как в моем исходном коде мой якорь становится кликабельным после удаления этих двух строк.

Я имею в виду <a href="/shop/1/">spam (2018)</a> якорь, который я специально создал для этого минимального примера, но у меня их несколько, и все они не работают.

1 Ответ

1 голос
/ 27 сентября 2019

Попробуйте: 

.content {
    width: 960px;
    margin: auto;
    padding-top: 20px;
}

Играйте со значением в верхнем паддере, пока не будете довольны им.

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

Поrequest: 

.search-bar {
    margin-top: 6px;
    height: 30px;
}

Играйте со значением по высоте, пока оно вам не понравится.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...