我正在制作一个非常简单的网站，其中包含两个水平导航列表 - 一个在顶部，一个在底部。当我缩小屏幕或在屏幕较小的任何其他计算机上查看时，我希望两个列表中的列表项保持水平(通过尺寸变小)，而不是像现在这样在彼此之上移动。我试过以百分比和自动更改宽度和边距，使内容内联，但由于我是新手，我觉得我做的事情根本上是错误的。如果网站的其余部分看起来很糟糕，请不要担心。我刚刚开始学习 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>最佳答案
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;
}<!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>关于html - 如何使列表项随屏幕大小缩放并保持水平？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40016865/