Question

当我放大或缩小时，我的元素正在移动，我已经尝试了所有我知道的代码，但它仍然是相同的，所以我发布了我的html和css代码，我希望你能帮助我。我在页面中放入的每个元素都有这个问题

    <!DOCTYPE html>    //html code
<html>
  <head>       // head tag

    <title></title>                    

  <link rel="stylesheet" type="text/css" href="untitled2.css"  /> //css link
  <meta http-equiv="content-type" content="text/html":charset-windows-1256">
  </head>
  <body>
  <div id="menu">  // div for menu 
<ul>
<li>link</li>
<li>link</li>
<li>link</li>       // ul li
<li>link</li>
<li>link</li>
</ul>
</div>

  </body>
</html>       // closing html



          //  css

body  {
    background-image: url('3.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% ;
    width:100%;
    height:100%;
    min-width:600px;          //body attribute 
    max-width:2000px;
    margin:0px;
    padding:0px;

}


#menu{
margin-top: 380px;
padding: 0px; 
background-color:#555258; //menu attribute 
width:2500px;
}

Answer 1

为什么要将宽度和高度设置为100％并设置最小和最大宽度？如果您尝试确保无论用于查看您网站的设备是否正确，请查看本教程。 http://www.dwuser.com/education/content/responsive-design-a-crash-course-and-demo/

Answer 2

我在这里做了一个疯狂的猜测，因为我不清楚你想要实现什么，但我希望有所帮助。

我将从一个空白的石板开始。

＆＃13;

/* Styles go here */

.menu {
  background-color: grey;
  text-align: center; /* Center text */
}

.menu li {
  display: inline-block; /* Place the list items on inline (on the same row) */
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <ul class="menu">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </body>

</html>

＆＃13;

这是一个好的开始吗？

css和html的高度和宽度？

2 个答案: