Fatal编程技术网
  • html/
  • Html 应用的CSS会导致锚点不可拾取

Html 应用的CSS会导致锚点不可拾取

html css django

Html 应用的CSS会导致锚点不可拾取,html,css,django,Html,Css,Django,我遇到了一个非常奇怪的问题，我注意到我的锚突然停止了工作，因为在中变得无法攀爬。然后我想这一定与应用CSS有关，当我开始禁用部分CSS时，我将问题缩小到以下几行： .content { width: 960px; margin: auto; } 我的页面结构如下所示： <!DOCTYPE html> <html> <head> <title>CoinShop v1.0</title> <lin

我遇到了一个非常奇怪的问题，我注意到我的锚突然停止了工作，因为在中变得无法攀爬。然后我想这一定与应用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>

.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;
}
这是你的电话号码

为什么这两行会引起这样的问题？我以前从未想到过这一点。 在小提琴中，删除这两行并不能解决问题，而在我的原始代码中，一旦删除这两行，我的锚就可以点击了

我指的是我为这个最小的例子创建的锚，但我有不止一个锚，它们都不起作用。

试试这个：

.content {
    width: 960px;
    margin: auto;
    padding-top: 20px;
}
玩填充顶部的值，直到你满意为止

小提琴：

根据您的要求：

.search-bar {
    margin-top: 6px;
    height: 30px;
}
玩高度值，直到你喜欢为止。

当你说它们不起作用时，你是什么意思？从你的小提琴中我可以看到，是锚链接上方的元素搜索栏重叠了它。我的建议是给搜索栏一个高度或给锚链接一个页边空白顶部。@IainShelvington它们不起作用，因为它们不可点击，你不能点击它们，当你悬停在锚上时，小指不会弹出。@OsvaldoCorreia我应该给它什么高度？你能发布一个答案吗，我很乐意接受。这是你的小提琴，上面有一个填充物。内容：正如我在评论中提到的，我更愿意给搜索栏一个特定的高度，但我不确定这个高度应该是多少。它甚至对1px都很满意，我不确定我应该给它多少。我总是给它至少内部元素的高度，因此我的值是30px。当然，这可以根据您的目标设计而改变。我的建议是使用浏览器的开发工具检查/检查元素，并使用它们。。。链接以获取更多信息：