Question

我是一名新手编码员，我正在建立我的第一个合适的网站。我的页面右侧有一列按钮链接。但是，只有在窗口全屏时才会显示它们。如果我用鼠标缩小窗口的大小，按钮就会消失。如果窗口改变大小，有什么方法可以使按钮保持可见？

这是HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
       <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
       <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
        <link rel="stylesheet" type="text/css" href="resources/css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Lato|Orbitron:400,500" rel="stylesheet" type=text/css>
        <title>Interactive Galaxy</title>
    </head>
    <body>    
        <header>
            <div class="hero-text-box">
                <h1>Explore the universe, or whatever...</h1>
            </div>

                <a class="quizzes full" href="#">Quizzes</a>



                <a class="calculators ghost" href="#">Calculators</a>



                <a class="solarsystem ghost" href="#">The Solar System</a>



                <a class="mysteries ghost" href="#">Mysteries of Space</a>



                <a class="otherresources ghost" href="#">Other Resources</a>

        </header>


    </body>

</html>

这是CSS代码。向下滚动到相关CSS的/ 所有我的按钮 /的位。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #fff;
    color: #555;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;
}


.row {
    max-width: 1140px;
    //margin: 0 auto;

}

header {
    background-image: url(img/joshua-earle-183442.jpg);
    background: no-repeat center center cover;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.hero-text-box {
    position: absolute;
    width: 1140px;
    top: 5%;
    left 50%;
    font-family: 'Orbitron', 'Arial', sans-serif;
    margin-left: 15px;
    word-spacing: 15px;
    font-weight: 300;
}

h1 {
    margin-top: 0;
    color: #ef872e;
}

/****ALL MY BUTTONS***/


.quizzes {
    position: absolute;
    display: inline-block;
    margin-left: 1730px;
    margin-bottom: 10px;
    top: 50%;
    text-decoration: none;
    color: #ef872e;
    font-family: 'Orbitron';
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #ef872e;
}

.calculators {
    position: absolute;
    display: inline-block;
    margin-top: 20px;
    margin-left: 1692px;
    top: 55%;
    color: #ef872e;
    text-decoration: none;
    font-family: 'Orbitron';
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #ef872e;
}

.solarsystem {
    position: absolute;
    width: 230px;
    display: inline-block;
    margin-top: 40px;
    margin-left: 1612px;
    top: 60%;
    color: #ef872e;
    text-decoration: none;
    font-family: 'Orbitron';
    padding: 10px;

    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #ef872e;
}

.mysteries {
    position: absolute;
    width: 240px;
    display: inline-block;
    margin-top: 60px;
    margin-left: 1602px;
    top: 65%;
    color: #ef872e;
    text-decoration: none;
    font-family: 'Orbitron';
    padding: 10px;
    padding-right: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #ef872e;
}

.otherresources {
    position: absolute;
    width: 220px;
    display: inline-block;
    margin-top: 30px;
    margin-left: 1623px;
    top: 75%;
    color: #ef872e;
    text-decoration: none;
    font-family: 'Orbitron';
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #ef872e;
}

.full:hover,
.full:active {
    background-color: #e97512;
    color: #fff;
    transition: background-color 0.3s;
    transition: color 0.3s;
}

.ghost:hover,
.ghost:active {
    border-color: #e97512;
    background-color: #e97512;
    color: #fff;
    transition: background-color 0.3s;
    transition: color 0.3s;
}

非常感谢。

Answer 1

我认为原因是你的margin-left属性，简单来说，窗口不足以显示这么多像素。更好的设置：

display: inline-block;
float: right;

此外，最好将按钮放在列表中，以便在样式中更好地查看和控制。

Answer 2

您的margin-left属性由一定数量的像素定义：

margin-left: 1730px;

即使屏幕较小，该规则仍将按像素计数应用。要使页面更具响应性，请将边距更改为百分比，例如：

margin-left: 80%;               /* 80% is just an example */

或使用@ VaxoBasilidze应用float: right;的想法。

Answer 3

删除链接中的所有边距。用这样的div包围你所有的链接：

        <div class="links">
            <a class="quizzes full" href="#">Quizzes</a>
            <a class="calculators ghost" href="#">Calculators</a>
            <a class="solarsystem ghost" href="#">The Solar System</a>
            <a class="mysteries ghost" href="#">Mysteries of Space</a>
            <a class="otherresources ghost" href="#">Other Resources</a>
        </div>

然后像这样更改链接容器样式：

.links {
  float: right;
}

Answer 4

解决方案很简单。您在top:中使用了%，因此在调整窗口大小时。 css根据窗口当前宽度计算所述％。

所以要解决这个问题;将您的top:更新为px;，例如top: 555px;，这样当您调整窗口大小时，您的按钮就会显示。

调整窗口

4 个答案: