我是 html 的新手，我在调整 html 页面中的组件大小时遇到问题。例如，我希望导航栏中的菜单在不同的分辨率下位于同一行。因为现在在我的代码中，当我更改分辨率时，菜单分为两行。菜单只有这 4 个类别(Study、Harmonogram、FAQ、Erasmus)，所以一个类别占导航栏的 25%。 看图片: 1920x1080 resolution , smaller resolution
html:
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Study
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Text1</a>
<a href="#">Text2</a>
<a href="#">Text3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Harmonogram
<i class="fa fa-caret-down"></i>
</button>
</div>
<div class="dropdown">
<button class="dropbtn">FAQ
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Text1</a>
<a href="#">Text2</a>
<a href="#">Text3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Erasmus
<i class="fa fa-caret-down"></i>
</button>
</div>
</div>
样式.css
body{
background: white;
}
h2 {
color: #3399ff;
margin: 10px;
padding-left: 150px;
}
/* Navbar container */
.navbar {
margin:0 auto;
text-align: center;
overflow: hidden;
background-color: #3399ff;
font-family: Arial;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 21vh;
background-color: inherit;
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #c0c0c0;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
最佳答案
首先你需要删除填充 其次，你必须用 % 设置宽度，所以当分辨率改变时，宽度也会改变。
body{
background: white;
}
h2 {
color: #3399ff;
margin: 10px;
padding-left: 150px;
}
/* Navbar container */
.navbar {
margin:0 auto;
text-align: center;
overflow: hidden;
background-color: #3399ff;
font-family: Arial;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
width:25%;
height:30px;
line-hight:30px;
margin:0 auto;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
/*padding: 14px 21vh;*/
background-color: inherit;
height:30px;
line-hight:30px;
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #c0c0c0;
width:100%;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content{
width:25%;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Study
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Text1</a>
<a href="#">Text2</a>
<a href="#">Text3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Harmonogram
<i class="fa fa-caret-down"></i>
</button>
</div>
<div class="dropdown">
<button class="dropbtn">FAQ
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Text1</a>
<a href="#">Text2</a>
<a href="#">Text3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Erasmus
<i class="fa fa-caret-down"></i>
</button>
</div>
</div>
</body>
</html>.header {
font-family: sans-serif;
font-size: 40px;
font-weight: bolder;
margin-left:20px;
}
.boxA {
float: left;
width:30%;
text-align:center;
border:1px solid;
height:auto;
padding-top:25px;
margin-left:20px;
}
p {
width: 100%;
text-align:left;
}
img {
width: 90%;
height: 200px;
}
.text {
width:90%;
display:inline-block;
}<html>
<body>
<div class="header">News</div>
<div class="boxA">
<img src="http://openclipart.org/image/300px/svg_to_png/4112/Clue_Simple_Clouds.png" alt="Mountain View" width="500" height="377">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut illum laboriosam voluptatem ullam id. Rerum ratione repellendus minus, doloribus earum quos, </p>
</div>
</div>
<div class="boxA">
<img src="http://openclipart.org/image/300px/svg_to_png/4112/Clue_Simple_Clouds.png" alt="Mountain View" width="500" height="377">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut illum laboriosam voluptatem ullam id. Rerum ratione repellendus minus, doloribus earum quos,</p>
</div>
</div>
</body>
</html>关于html - 调整 html 组件的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47050558/