Question

我正在创建一个非常简单的网站，其中包含两个水平导航列表 - 一个位于顶部，另一个位于底部。我想让两个列表中的列表项保持水平（通过缩小尺寸）当我将屏幕缩小或在任何其他具有较小屏幕的计算机上查看时，并且不像现在这样在彼此之上移动。我已经尝试以百分比和自动方式更改宽度和边距，使内联中断，但是因为我是新手，所以我觉得我做的事情从根本上是错误的。不要担心，如果网站的其余部分看起来废话。我刚开始学习HTML和CSS。

body {
  margin: 0;
  padding: 0;
}
body {
  background-image: url("paper.jpg");
  background-repeat: repeat-y;
  text-align: center;
}
.heading {
  margin: 0% 46%;
}
.button {
  display: inline-block;
  padding: 15px 20px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 10px;
  box-shadow: 0 5px #999;
  margin: auto;
  width: auto;
}
.button:hover {
  background-color: #3e8e41
}
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.myDiv {
  background-color: none;
  margin: -20px 90px;
  height: 650px;
  border: 8px double #90EE90;
  border-radius: 20px;
  color: white;
  text-align: justify;
  font-family: "Arial", Times, serif;
  font-weight: bold;
  padding: 10px;
}
ul {
  list-style-type: none;
  margin: auto;
  padding: 0px;
  overflow: hidden;
  background-color: #333;
  width: 50%;
}
li {
  display: inline;
  border-right: 1px solid #bbb;
  width: 100%
}
li:last-child {
  border-right: none;
}
li a {
  color: white;
  padding: 14px 76px;
  text-decoration: none;
}

<!DOCTYPE html5>
<html>

<head>

</head>

<body>

  <h1 class="heading">Webseite</h1>

  <button class="button">Button 1</button>
  <button class="button">Button 2</button>
  <button class="button">Button 3</button>
  <button class="button">Button 4</button>
  <button class="button">Button 5</button>

  <div class="myDiv">Was willst du machen?</div>

  <ul>
    <li><a href="#home">Salman</a>
    </li>
    <li><a href="#news">Patric</a>
    </li>
    <li><a href="#contact">IMIBE</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
</body>

</html>

Answer 1

＆＃13;

body {
  margin: 0;
  padding:0;  
}

body {
  background-image: url("paper.jpg");
  background-repeat: repeat-y;
  text-align: center;
}

.heading {
  margin: 0% 46%;
}

.button {
  display: inline-block;
  padding: 15px 0px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 10px;
  box-shadow: 0 5px #999;
  margin: auto;
  width: 15%; 
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.myDiv {
  background-color: none;
  margin: -20px 90px; 
  height: 650px;
  border: 8px double #90EE90;
  border-radius: 20px;
  color: white;
  text-align: justify;
  font-family: "Arial", Times, serif;
  font-weight: bold;
  padding: 10px;
}


ul {
    list-style-type: none;
    margin: auto;
    padding: 0px;
    overflow: hidden;
    background-color: #333;
    display: inline;
}

li {
    display: inline-block;
    border-right:1px solid #bbb;  
    width: 20%    
}

li:last-child {
    border-right: none;
}

li a {
    color: white;
    text-decoration: none;    
}

＆＃13;

<!DOCTYPE html5>
    <html>

    <head>

    </head>

    <body>

      <h1 class="heading">Webseite</h1>

        <button class="button">Button 1</button>
        <button class="button">Button 2</button>
        <button class="button">Button 3</button>
        <button class="button">Button 4</button>
        <button class="button">Button 5</button>

        <div class="myDiv">Was willst du machen?</div>

            <ul>
                  <li><a href="#home">Salman</a></li>
                  <li><a href="#news">Patric</a></li>
                  <li><a href="#contact">IMIBE</a></li>
                  <li><a href="#about">About</a></li>
            </ul>




</body>

</html>

＆＃13;

Answer 2

body {
  margin: 0;
  padding: 0;
}
body {
  background-image: url("paper.jpg");
  background-repeat: repeat-y;
  text-align: center;
}
.heading {
  margin: 0% 46%;
}
.button {
  display: inline-block;
  padding: 15px 20px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 10px;
  box-shadow: 0 5px #999;
  margin: auto;
  width: auto;
}
.button:hover {
  background-color: #3e8e41
}
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.myDiv {
  background-color: none;
  margin: -20px 90px;
  height: 650px;
  border: 8px double #90EE90;
  border-radius: 20px;
  color: white;
  text-align: justify;
  font-family: "Arial", Times, serif;
  font-weight: bold;
  padding: 10px;
}
ul {
  list-style-type: none;
  margin: 0 20px;
  padding: 0px;
  overflow: hidden;
  background-color: #333;
  width: calc(100% - 40px);
  display: flex;
}
li {
  display: inline;
  border-right: 1px solid #bbb;
  width: 25%
}
li:last-child {
  border-right: none;
}
li a {
  color: white;
  text-decoration: none;
}

<!DOCTYPE html5>
<html>

<head>

</head>

<body>

  <h1 class="heading">Webseite</h1>

  <button class="button">Button 1</button>
  <button class="button">Button 2</button>
  <button class="button">Button 3</button>
  <button class="button">Button 4</button>
  <button class="button">Button 5</button>

  <div class="myDiv">Was willst du machen?</div>

  <ul>
    <li><a href="#home">Salman</a>
    </li>
    <li><a href="#news">Patric</a>
    </li>
    <li><a href="#contact">IMIBE</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>





</body>

</html>

如何使列表项与屏幕大小一起缩放并保持水平？

2 个答案: