Question

最后，我的列表可以工作并保持一行在一起，但是现在我发现的解决方案是我不能使用％作为宽度，更改窗口大小时，我无法使整个导航栏缩小。这与li / ul有关，可以防止缩小吗？

我认为，添加一个具有与徽标相同的收缩功能的div会起作用，但这似乎并没有太大作用。我已经在这个项目上工作了一段时间，很烦人的是，这一件事是剩下的唯一问题。完成此操作后，我可以开始翻转gif中所有相同的图像，并创建其他页面。

请注意，我的网站被用来代表我写的关于动物穿越的文章，哈哈。

谢谢大家的帮助！

请参见下面的gif示例（徽标可以缩小，列表不能缩小）：

css：

body {
    background-image: url("repeatbg.gif");
    background-repeat: repeat;
}

.taskbarimages {
    height: 50px;
    margin-right: 10px;
}

#title {
    width: 30%;
    height: 30%;
    margin-left: 20%;
}
.toppage {
    margin-left: 20%;
}

.shinktofit {   
    width: 30%;
    height: 30%;
}
ul {
    list-style-type: none;
    white-space: nowrap;
}

li {
    display: inline-block;
    margin: 0 -1px;
}

html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="indexcss.css">
            <meta charset="utf-8"/>
        </head>
        <body>
            <!-- TOP HEADER -->

            <!-- top banner -->
            <div class="toppage">
                <!-- Animal Crossing Logo DIV -->   
                <div>
                    <img src="images/animalcrossinglogo.png" alt="Animal Crossing Logo" id="title"/>
                </div>
                <div class="shinktofit">
                <ul>
                    <li>
                        <a href="link1.html">
                            <img src="images/homepagebutton.png" class="taskbarimages">
                            </a>
                        </li>
                        <li>
                            <a href="link2.html">
                                <img src="images/historybutton.png" class="taskbarimages">
                                </a>
                            </li>
                        <li>
                            <a href="link2.html">
                                <img src="images/historybutton.png" class="taskbarimages">
                                </a>
                            </li>
                        <li>
                            <a href="link2.html">
                                <img src="images/historybutton.png" class="taskbarimages">
                                </a>
                            </li>
                        <li>
                            <a href="link2.html">
                                <img src="images/historybutton.png" class="taskbarimages">
                                </a>
                            </li>
                        </ul>
                    </ul>
                    </div>
                </div>
            </body>
        </html>

Answer 1

您可以简单地使用引导程序，并且在引导程序中有可以用于不同窗口大小的div类。例如，有div类，例如用于大屏幕的“ col-lg”，用于中等大小的屏幕的“ col-md”以及用于小型显示器的“ col-sm”和“ col-xs”。在html头中，您可以在下面简单地使用此行。

ALL_DONE

您可以阅读本文档。 https://getbootstrap.com/docs/4.1/layout/grid/

当您使用上面的东西时，您不必担心窗口会有所响应。

Answer 2

有几种方法可以做到这一点。 1）代替％和像素，使用vw（视图宽度）作为在视口上计算的单位，并将最小宽度添加到li。例如。

/* Change the unit values as per your project */
.li{
    width : 10vh;
    min-width : 100px;
}
.taskbarimages{
     Width : 100%;
}

2）使用媒体查询并为不同的屏幕尺寸设置高度。例如。

@media(700px){
      .li{
          Width : 150px;
      }
}

3）使用诸如bootstrap，bulma，skeleton之类的框架。

Answer 3

问题是您将图像用作链接，并且默认情况下图像没有响应。将.taskbarimages的宽度设置为100％，将高度设置为auto可以解决您的问题。

由于您将高度设置为50px，因此在较小尺寸时会显得怪异。相反，给它一个最大高度将有助于防止这种情况，并防止它们变得太大。

您可能需要在没有间距的情况下游玩，但这至少会使它们随容器缩放。

.taskbarimages {
  width: 100%;
  height: auto;
  max-height: 50px;
  margin-right: 10px;
}

Answer 4

更改为此。

.taskbarimages {
height: auto;
margin-right: 10px;
width: 50%;
}

更改浏览器窗口时，缩小其中具有列表的DIV容器

4 个答案: