文本显示在按钮下方（响应式设计 CSS）

Question

我正在尝试响应式 web 设计，但是当我缩小浏览器大小时，按钮与我的文本部分重叠，有人知道如何解决这个问题吗？ 第一张图片是正常屏幕尺寸，第二张图片是缩小屏幕尺寸。 即使屏幕尺寸缩小，我也想像第一张图片一样显示。

HTML 密码是

<!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">
    <title>Quote API</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="button">
    <button onclick="getQuote()">Give me a quote!</button>
    </div>

    


 <div id="para">
   
    <p id="quote"></p>
    
    <p id="quoteauthor">test</p>
 </div>

    <script src="script.js"></script>
</body>
</html>

而 CSS 文件代码是

body{
    background:rgb(68, 142, 226);
    
    
}

#para {
    margin-top: 30%;
    

}

p { 
    text-align: center;
    color:white;
    
}

button{
    background:white;
    border: 4px solid white;
    border-radius:1em;
    font-size:24px;
    padding:1em 3em;
    /*CSS center element trick*/
        position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: 
        translate(-50%, -50%);
    transform: 
        translate(-50%, -50%);
    -webkit-transition-property: 
        all;
    -webkit-transition-duration:
        1s;
    -webkit-transition-timing-function:
        ease-out;
    transition-property: 
        all;
    transition-duration:
        1s;
    transition-timing-function:
        ease-out;
}

button:hover{
    background:green;
    color:white;
    font-size:34px;
    /*the previous padding:1em 3em; is what enlarges the element on hover ***note that the unit em translates to the size of your font. example: font=24px then 1em = 24px*/
}

Answer 1

您正在绝对定位您的按钮，这将它从元素流中取出。 您只需要使用一些布局技术：例如，flex 或 grid。 请参见下面的示例：

<!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">
    <title>Quote API</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        * {
            box-sizing: border-box;
        }
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            background: rgb(68, 142, 226);
        }

        .vbox {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            color: white;
            padding-block: 15%;
        }

        button {
            background:white;
            border: 4px solid white;
            border-radius:1em;
            font-size:24px;
            padding:1em 3em;
            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: ease-out;
        }

        button:hover {
            background: green;
            color: white;
            font-size: 34px;
        }
    </style>
</head>
<body>

    <div class="vbox">
        <button onclick="getQuote()">Give me a quote!</button>
        <span id="quote">Your favorite quote from your favorite author.</span>
        <span id="quoteauthor">Your favorite author</span>
    </div>

    <script src="script.js"></script>
</body>
</html>

文本显示在按钮下方（响应式设计 CSS）

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-12-13 01:17:12

文本显示在按钮下方（响应式设计 CSS）

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-12-13 01:17:12

解决方案1
1 已采纳 2022-12-13 01:17:12