Question

我的HTML代码有问题，我不知道如何解决。

我有这个网站：

然后，当我调整导航器网络的大小时，会发生以下情况：

那么，我在做什么错了？

代码：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="css/styles.css">
    </head>

    <body>
        <div id="mainMenu" class="width100 height10 blackBackgroundColor whiteFont">
            <img src="img/logoTest.png" />

            <ul style="background-color: red;" class="height100 width75 inlineblock allinlineblock">
            </ul>
        </div>
    </body>
</html>

CSS： 在代码的末尾，这是菜单配置。当我说菜单时，图片中显示的是条形图。

    *{
    /*Configuration to delete default styles*/
    margin:0;
    padding: 0;
    color:black;

    list-style: none;
    font-style: none;
    border-style: none;
    text-decoration: none;

    box-sizing: border-box;
}

html, body{
    height: 100vh;
    width: 100vw;
}



/*Configurations of common use*/

.width100{
    width: 100%;
}

.width75{
    width: 75%;
}

.width50{
    width: 50%;
}

.width25{
    width: 25%;
}

.height100{
    height: 100%;
}

.height75{
    height: 75%;
}

.height50{
    height: 50%;
}

.height25{
    height: 25%;
}

.height10{
    height: 10%;
}



.inlineblock{
    display: inline-block;
}

.allinlineblock *{
    display: inline-block;
}
/*
LIST OF COLOR USED:
With your text editor change the value here and then will change in all the document

Black 1: #212121
White 1: #f4f6f7
*/

.blackBackgroundColor{
    background-color: #212121;
}

.whiteBackgroundColor{
    background-color: #f4f6f7;
}

.blackFont{
    color: #212121;
}

.whiteFont{
    color: #f4f6f7;
}

#mainMenu{
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}

#mainMenu img{
    position: absolute;
    left: 5%;
    height: 100%;
}

#mainMenu ul{
    position: absolute;
    left: 10%;
    height: 100%;
    width: 90%;
}

Answer 1

尝试为您的ul使用此相对值！它可能会起作用我还是这个新手！

* {
  /*Configuration to delete default styles*/
  margin: 0;
  padding: 0;
  color: black;

  list-style: none;
  font-style: none;
  border-style: none;
  text-decoration: none;

  box-sizing: border-box;
}

html,
body {
  height: 100vh;
  width: 100vw;
}

/*Configurations of common use*/

.width100 {
  width: 100%;
}

.width75 {
  width: 75%;
}

.width50 {
  width: 50%;
}

.width25 {
  width: 25%;
}

.height100 {
  height: 100%;
}

.height75 {
  height: 75%;
}

.height50 {
  height: 50%;
}

.height25 {
  height: 25%;
}

.height10 {
  height: 10%;
}

.inlineblock {
  display: inline-block;
}

.allinlineblock * {
  display: inline-block;
}
/*
LIST OF COLOR USED:
With your text editor change the value here and then will change in all the document

Black 1: #212121
White 1: #f4f6f7
*/

.blackBackgroundColor {
  background-color: #212121;
}

.whiteBackgroundColor {
  background-color: #f4f6f7;
}

.blackFont {
 color: #212121;
}

.whiteFont {
  color: #f4f6f7;
}

#mainMenu {
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

#mainMenu img {
  position: absolute;
  left: 5%;
  height: 100%;
  width: 100%;
}

#mainMenu ul {
  position: absolute;
  left: 10em;
  height: 100%;
  width: 90%;
}

Answer 2

为元素设置一个以像素为单位的宽度，如果您使用百分比，则它们会在页面显示时缩小。

另外，调查一下媒体查询，如果页面小于一定大小，您可以使用动态CSS。（例如，这在移动设备上非常方便）

调整导航器窗口大小时，为什么元素会更改大小？

2 个答案: