Question

我对html很新，我在调整html页面中的组件时遇到问题。我希望例如导航栏中的菜单在不同分辨率的同一行中。因为现在在我的代码中，当我更改分辨率时，菜单分为两行。菜单只有这4个类别（Study，Harmonogram，FAQ，Erasmus），因此一个类别是导航栏的25％。看图片： Damo's solution ，1920x1080 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>

的style.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;
}

Answer 1

将width: 25%;添加到.dropdown css。对于响应性，使用媒体查询将是更好的选择。

.dropdown {
    float: left;
    overflow: hidden;
    width: 25%;
}

Answer 2

首先你需要删除填充第二，你必须用％设置宽度，所以当分辨率改变时，宽度也会改变。

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组件的大小

2 个答案: