文本显示在按钮下方(响应式设计CSS)

kknvjkwl 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(132)

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

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*/
}

css

来源：https://stackoverflow.com/questions/74778739/text-display-below-button-responsive-design-css

1条答案

按热度按时间

2ledvvac1#

你绝对定位了你的按钮，这就把它从元素流中去掉了。你只需要使用一些布局技巧：例如，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>

赞(0）回复(0）举报 2022-12-15

我来回答

文本显示在按钮下方(响应式设计CSS)

1条答案

相关问题

热门标签

最新问答