时间戳

首页 > 解决方案 > 摆脱未知的溢出 CSS

html - 摆脱未知的溢出 CSS

问题描述

我想摆脱 x 轴上的溢出并且找不到它实际发生的原因，因为它不是很明显。每个 vw/width 属性都设置为 100。我很确定 .logout 导致了这个问题，但我不知道我应该修改什么来修复它。任何帮助表示赞赏！

/* GLOBAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: monospace;
}

header {
    position: relative;
}

/* MAIN */
.logo {
    position: absolute;
    top: 25px;
    left: 40px;
    font-weight: 800;
    font-size: 2.5rem;
}

.container {
    background-color: black;
    width: 100vw;
    height: 100vh;
}

/* NAVBAR */
.nav {
    width: 100vw;
    height: 80px;
    background-color: #5f7866;
}
.navbar {
    position: absolute;
    top: 30px;
    left: 40%;
}

.items {
    display: flex;
    list-style: none;
}

.item {
    font-size: 2rem;
    margin-left: 20px;
    color: black;
    font-weight: lighter;
    transition: 0.2s;
}

.item:hover {
    transition: all 0.1s ease;
    transform: scale(0.98);
    border-bottom: 1px solid white;
}

.links {
    display: inline-block;
    text-decoration: none;
    color: black;
}

.logout {
    position: absolute;
    font-size: 2rem;
    border: 2px solid #49e31b;
    background-color: transparent;
    border-radius: 20px;
    padding: 10px 10px 10px 10px;
    top: -10px;
    left: 600px;
    transition: 0.3s;
    color: black;
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
}

.logout:hover {
    background-color: #49e31b;
    cursor: pointer;
    transform: scale(0.98);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <title>{% block title %}  {% endblock title %}</title>
</head>
<body>
    <header class="nav">
        <h1 class="logo">Art Showcase</h1>
        <div class="navbar">
            <ul class="items">
                <li class="item">
                    <a class="links" href="{% url 'home' %}">Home</a>
                </li>
                <li class="item">
                    <a class="links" href="{% url 'about' %}">About</a>
                </li>

                <li class="item">
                    <a class="links" href="{% url 'register' %}">Register</a>
                </li>
                <li class="item">
                    <a class="links" href="{% url 'login' %}">Login</a>
                </li>
            </ul>
            <div>
                <a class="logout "href="{% url 'logout' %}">Logout</a>
            </div>
        </div>
    </header>

    <div class="container">
    {% block content %} 

    {% endblock content %}
    </div>

</body>
</html>

标签： htmlcss

解决方案

整个问题是您使用定位和损坏的 html 结构的方式（您忘记在 ul 之后关闭导航栏 div 并为注销按钮打开了另一个 div。使用下面的代码供您参考：

body {
  margin:0;
  padding:0;
  font-family:monospace;
}
.nav {
  display: grid;
  grid-template-columns:auto auto auto;
  grid-gap : 30px;
  background: #5f7866;
  padding:10px;
}

.navbar .items li {
  display:inline-block;
  list-style:none;
  font-size:2em;
  margin-right:10px;
}

.navbar .items li a {
  color:#000;
  text-decoration:none;
}

.item:hover {
    transition: all 0.1s ease;
    transform: scale(0.98);
    border-bottom: 1px solid white;
}

.logoutDiv {
  text-align:right;
}

.logout {
    font-size: 2rem;
    border: 2px solid #49e31b;
    background-color: transparent;
    border-radius: 20px;
    padding: 10px 10px 10px 10px;
    transition: 0.3s;
    color: black;
    display: inline-block;
    text-decoration: none;
}

.logout:hover {
    background-color: #49e31b;
    cursor: pointer;
    transform: scale(0.98);
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <title>{% block title %}  {% endblock title %}</title>
</head>
<body>
    <header class="nav">
        <div>
          <h1 class="logo">Art Showcase</h1>
        </div>
        <div class="navbar">
            <ul class="items">
                <li class="item">
                    <a class="links" href="{% url 'home' %}">Home</a>
                </li>
                <li class="item">
                    <a class="links" href="{% url 'about' %}">About</a>
                </li>

                <li class="item">
                    <a class="links" href="{% url 'register' %}">Register</a>
                </li>
                <li class="item">
                    <a class="links" href="{% url 'login' %}">Login</a>
                </li>
            </ul>
           </div>
            <div class="logoutDiv">
                <a class="logout "href="{% url 'logout' %}">Logout</a>
            </div>
        </div>
    </header>

    <div class="container">
    {% block content %} 

    {% endblock content %}
    </div>

</body>
</html>

我希望这能解决你的问题。

推荐阅读