个人中心
gpt4 book ai didi

javascript - 当我向下还原页面时，很少有
元素移动

转载 作者：行者123 更新时间：2023-11-28 07:45:44 26 4
gpt4 key购买 nike

我是 HTML 和 CSS 的新手。我的问题可能很简单，但我找不到解决方案。我尝试开发一个简单的网页。

屏幕最大化时看起来不错，但当我尝试还原页面时，一些 <div>元素移动，屏幕布局完全改变。

这是我用于它的 HTML。 

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript">
function buttonchange(type)
{
document.getElementById("change").style.visibility='visible';
document.getElementById("change").value= type;

}

</script>
<title>PFP ADMIN</title>
</head>
<body>
<table width="100%"  border="0">
    <tbody><tr>

        <td align="justify">
            <p id="title">My Web Page</p>
        </td>
        <td></td>
    </tr>
</tbody></table>

<div  id="inner">
    <div align="center" id="header">

    <p>User Management<p> 

</div>
    <div  id="menu">
    <div align="center">
        <input id="Search" type="button" class="btn" value="Search User" onclick='buttonchange("Search")'/>
    </div><br> <br>
            <div align="center">
        <input id="Save" type="button" class="btn" value="New User" onclick='buttonchange("Save")'/>
    </div><br> <br>
            <div align="center">
        <input id="Delete" type="button" class="btn" value="Delete User" onclick='buttonchange("Delete")'/>
    </div><br> <br>
            <div align="center">
        <input id="edit" type="button" class="btn" value="Edit" />
    </div><br> <br>     <div align="center">
        <input id="save" type="button" class="btn" value="Save" />
    </div><br> <br> 
        <div align="center">
        <input id="clear" type="button" class="btn" value="Clear All"/>
    </div><br> <br>
</div>

<div  id="form">
  <div align="justify" class="search" style="display:table">
<table>
    <tr>
        <td><div id="column">
            Firstname &nbsp;&nbsp;
            </div>
        </td>
         <td><div class="column2" >
             <input id="fname"class="column2" value="" type="text" style="height:30px;"/>

            &nbsp;&nbsp;
            </div> 
        </td>
    </tr> 
    <tr>
        <td><div id="column">
            Lastname &nbsp;&nbsp;
            </div>
        </td>
         <td><div id="column2" >
            <input id="lname" class="column2" value="" type="text" style="height:30px;"/>
            &nbsp;&nbsp;
            </div>
        </td>
    </tr>
    <tr> 
        <td><div id= "column">
        User Role  &nbsp;&nbsp;
        </div>
        </td>  
        <td><div id="column2">
            <select id="role"class="column2"  size="1" style="height:30px;">

              <option selected="selected">User Role</option>
              <option>Super User</option>
              <option>Segment Planner</option>
              <option>Segment Manager</option>
              <option>Finance</option>

              </select>
              &nbsp;&nbsp;
              </div>
        </td>
     </tr> 
     <tr>  
        <td><div id="column" >
        Responsible Area  &nbsp;&nbsp;
        </div>
        </td>
        <td><div id="column2">
            <select id="area" class="column2" size="1" style="height:30px;">

              <option selected="selected">Responsible Area</option></select>
              &nbsp;&nbsp;
              </div>
        </td>

    </tr>
    <tr>  
        <td><div id="column" >

        </div>
        </td>
        <td><div id="column2">

              </div>
        </td>

    </tr><tr>  
        <td><div id="column" >

        </div>
        </td>
        <td><div id="column2">
            <input id="change" type="button" class="btn" value="" style="width:200px;visibility:hidden" />
              </div>
        </td>

    </tr>
</table>



  </div>

</div>
</div>

</body>
</html>

这是我使用的外部 CSS。

#header{
 width:1200px;
  height:50px;
  background-color:#909090;
    font-family:'Helvetica Neue',sans-serif;
    font-size:25px;
    margin-top: -25px;
   }


#title{
font-family:'Helvetica Neue',sans-serif;
font-size:35px;
color:#09417A;
}

#inner{

 width:1200px;
 height:630px;
 margin-left: 200px;
 border: solid black 1px;
 border-radius:4px;
 min-width:700px;

}
html,
body{
 min-width:700px;
}

.btn {
background: #909090;
padding:8px 13px;
width:200px;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9
}

#menu{
 position:absolute;
 width:300px;
 height:400px;
 z-index:15;
 top:45%;
 left:25%;
 margin:-100px 0 0 -150px;


}
#column{

width:200px;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
align:center;
height: 45px;
}
.column2{

width:200px;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
align:center;
height: 45px;
border-radius:4px;
}
#form{
 position:absolute;
 width:600px;
 height:400px;
 z-index:15;
 top:45%;
 left:50%;
 margin:-100px 0 0 -150px;
 border: solid black 1px;
 border-radius:4px;

}



.search
{
border-radius: 6px;
padding: 30px; 
width: 500px;
height: 20px;
}
table {
margin: 0 auto;
  }

我查看了一些关于堆栈溢出的帖子，发现 min-width属性(property)可以帮助解决这个问题。 min-width为我工作过一个<div>元素，但仍然很少<div>离开其位置的元素。

任何人都可以解释在这种情况下发生了什么以及我如何更改我的代码以获得我想要的行为吗？

最佳答案

由于代表的原因，我无法发表评论，但我查看了您的代码，在其当前状态(Tabbing)下，它真的很难通读。

看起来您缺少一些关闭的 div 标签..但由于制表符，我不能 100% 确定。

如果您清理代码，可能会更容易提供帮助。

关于javascript - 当我向下还原页面时，很少有 <div> 元素移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30711806/

26 4 0
文章推荐： html - 如何防止在div中旋转文本？
文章推荐： c++ - 在 QT Creator 中封装 UI 还是传递指向 UI 的指针更好？
文章推荐： css - 内联样式导致文本显示在图像之前？
文章推荐： html - 两个连续位置相对不正常
行者123
个人简介

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

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