个人中心
gpt4 book ai didi

HTML 和 CSS 创建的网页不应在调整浏览器大小时更改/调整元素的位置

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

我是 HTML 和 CSS 的初学者。我正在尝试用 HTML 制作一个非常基本的网页。我面临一个问题。当我调整浏览器大小时，导航项的位置会自动改变。有什么办法可以固定那里的位置吗？

@font-face { font-family: sansation; src: url('sanslight.ttf'); }

body{
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #f8f8f8;
    font-family: sansation;
    color:white;
}

/* ---------Header-------------*/
.container{
    max-width: 920px;
    width: 100%;
    margin: auto;
    overflow: hidden;
    padding:10px 21px;
    border-bottom: 2px solid darkgrey;
    background-color: white;
    
}

.topnav {
    float: right;
    overflow: hidden;
    margin-top: 4px;
}

.topnav a{
    color: white;
    display: inline-block;
    line-height: normal;
    margin-left: 15px;
    text-decoration: none;
    padding: 10px 20px;
    background-color: #ff9900;
}

.topnav a:hover{
    background-color: #ffad33;
    font-style: italic;
    border: none;
    padding-bottom: 6px;
    border-bottom:  4px solid #e68a00;
}
.topnav a.active{
    padding-bottom: 6px;
    font-weight: 600;
    background-color: #ff9900;
    font-style: normal;
    border-bottom: 4px solid #e68a00;    
}

.logo{
    margin-top: 2px;
}



/*-------CONTENT-------*/
.slideshow{
    max-width: 960px;
    height: 100%;
    width: 100%;
    border: 2px solid darkgrey;
    margin-left: auto;
    margin-right: auto;
    margin-top: 21px;
}

h2{
    width: 923px;
    line-height: 25px;
    padding: 10px 21px;
    letter-spacing: 1px;
    margin-left: auto;
    margin-right: auto;
    background: #ff9900;
    
}

.doctor{
    color:black;
    max-width: 960px;
    width: 100%;  
    margin-left: auto;
    margin-right: auto;
    float: none;
    text-align: center;
    overflow: hidden;
    background: white;
    border-width: 2px;
}

.doctor tr{
    font-size: 14px;
    text-align: center;
    
}

.demo ,table ,td{
    color: darkgray;
    max-width: 960px;
    width: 33%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    padding: inherit;
    text-align: center;
    
    
}
<!DOCTYPE html>
<html>
<head>
    <title>Online Doctor Support</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
    <link rel="stylesheet" href="style.css">

    </head>
    
<body>
<header>
    <div class="container">
    <div class="logo">
        <a href="#"><img src="images/logo.png" style="width:150px;height:auto;"></a>
    <div class="topnav">
        <a class="active" href="#">Home</a>
        <a href="about.htm">About</a>
        <a href="#">Review</a>
        <a href="#">Contact</a>
        </div>
    </div></div>
</header>
<div class="slideshow">
    <img src="images/ste.png">
    </div>
    
    <h2>Welcome!</h2>

    
<table class="doctor">
    <tr>
        <th><img src="images/doctor.png" style="width:150px;height:150px"></th>
        <th><img src="images/doctor1.png" style="width:150px;height:150px"></th>
        <th><img src="images/doctor3.png" style="width:150px;height:150px"></th>
    </tr>
    
    <tr>
        <td><font size="35px">Doctor1</font></td>
        <td><font size="35px">Doctor2</font></td>
        <td><font size="35px">Doctor3</font></td>
    </tr>

    </table>
    
<table class="demo">
    <tr>
    <td>Description</td>
    <td>Description</td>
    <td>Description</td>
    </tr>
    </table>

    
    </body>
</html>

如果我的编码有错误，我真的很抱歉；)

这是我调整浏览器大小时页面的样子:http://i.imgur.com/Eb3BnXx.jpg

最佳答案

这是因为您为 .container 指定了 100% 的宽度。如果您不希望元素在调整窗口大小时改变位置，请考虑为您的容器提供固定宽度(尽管不推荐这样做，并且违反响应式设计原则)。

一旦它在桌面浏览器上得到修复，那么也许你可以查看 Responsive Web Design (使用 @media 查询)支持各种屏幕和分辨率。

关于HTML 和 CSS 创建的网页不应在调整浏览器大小时更改/调整元素的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43425244/

25 4 0
文章推荐： php - 如何在 3 秒后打开模式？
文章推荐： 连接两个字符串，中间为空
文章推荐： c - C 中的 AES CBC 模式
文章推荐： html - 物体不会居中
太空宇宙
个人简介

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

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