个人中心
gpt4 book ai didi

html - 调整窗口大小时如何防止按钮移动

转载 作者：太空宇宙 更新时间：2023-11-04 01:51:24 24 4
gpt4 key购买 nike

我需要一些帮助，因为我是 html 编码的新手。反正，我用 Bootstrap 制作了一个旋转木马。轮播本身工作正常。但是在轮播中放置一个按钮后，(使用 top: (px) 和 right: (px) 因为我不知道如何将它放在我想要的地方)它仍然可以正常工作。直到我开始调整窗口大小。背景变小，但按钮的大小保持不变。所以它开始四处移动，曾经是彼此相邻的 2 个按钮，现在是 2 个按钮，它们之间有很多空间。在这里，看看我的代码:HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <title>Galaxy</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
</style>
    </head>
        <body>
            <div id="theCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#theCarousel" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="galaxy3.jpg"> 
                        <div class="slide1"></div>
                        <div class="carousel-caption">
                            <div class="bannertext">
                                <h1>Santorodesign</h1>
                                <p>A website made by Michael</p>
                                <div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
                                <div class="mobileHide"> <button id="headerbutton-english">English</button></div>
                            </div>                              
                        </div>
                </div>
                <div class="item">
                    <div class="slide2"></div>
                    <img src="galaxy2.jpg">
                    <div class="carousel-caption">
                        <div class="bannertext2">
                            <h1>Explore the galaxy<h1>
                    </div>
                </div>          
            </div>

                <a class="left carousel-control" href="#theCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>

                <a class="right carousel-control" href="#theCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span> 
                </a>            
            </div>
        </div>
        <div id="firstrow">
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img id="mercury" src="mercury.png"> <br>
                (text) <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img id="earth" src="earth.png"> <br>
                (text)<br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img id="venus" src="venus.png"> <br>
                (text) <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Venus</button></a>
            </div>
        </div>          
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script> 
    </body>
</html>

CSS

.carousel-control.left, .carousel-control.right {
    background-image: none
}
#firstrow {
   font-size: 2em;
   padding: 100px 0 0 0;
   width: 100%;
   height: 550px;
   text-align: center;
   color: black;
   background: #DCDCDC;
   position: relative;
}
@media all and (max-width: 900px) {
    #headerbutton-nederlands { display: none; }
    #headerbutton-english { display: none; }
}
.planet {
    margin-bottom: 30px;
    position: relative;
}
    .planet img {
        height: 300px;
        max-width: none;
    }

    .bannertext {
        font-size: 1.3em;
        line-height: 15px;
    }
    .bannertext h1 {
        font-size: 2em;
    }
    .bannertext2 {
        font-size: 2em;
    }
 .mobileShow { display: none;}
 .mobileHide { display: inline;}
     /* Smartphone Portrait and Landscape */
    @media only screen
        and (max-device-width : 480px){
        .mobileShow { display: inline;}
        .mobileHide { display: none;}
        .planet img{
            height: 200px;
        }
        }
#headerbutton-nederlands {
    position: absolute;
    font-weight: bold;
    bottom: 35px;
    right: -90px;
    -webkit-border-radius: 5px;
    line-height: 50px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;    
}
#headerbutton-english {
    position: absolute;
    font-weight: bold;
    bottom: 35px;
    right: 100px;
    -webkit-border-radius: 5px;
    line-height: 50px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;
}

基本上我想要的是当窗口变小时按钮+按钮内的文本也会调整大小。就好像按钮是图像的一部分一样。

感谢您的宝贵时间。-迈克尔

最佳答案

如果您希望按钮相对于屏幕大小进行缩放，则需要使用相对单位而不是像素来设置它们的样式。您可以使用 % 相对于它们的父元素调整它们的大小，使用 em 或 rem 相对于字体大小调整它们的大小，或者-- 最有可能满足您的需要 -- vh 或 vw 分别相对于视口(viewport)的高度和宽度缩放它们。

假设您的初始样式适用于 1140 像素宽的视口(viewport)(只是一个任意起点)，以下 CSS 可能会让您朝着正确的方向前进:

#headerbutton-nederlands {
    position: absolute;
    font-weight: bold;
    bottom: 3vw;
    right: -8vw;
    -webkit-border-radius: .5vw;
    line-height: 4.3vw;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;    
}

关于html - 调整窗口大小时如何防止按钮移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43430213/

24 4 0
文章推荐： c - C 中的 15 位结构
文章推荐： C:字符串例如 "abcde123"到 int 123
文章推荐： 仅使用整数算法计算 C 中 N 个整数的平均值而不保留 N 个值
文章推荐： html - 左 Div 固定，多个右 Div 可滚动
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com