CSS：如何使无序列表之后的元素不从新行开始？
[英]CSS: How can I keep the element after an unordered list from starting on a new line?
问题描述
I'm trying to make a simple navigation bar that has a input box. 
我正在尝试制作一个具有输入框的简单导航栏。
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" href="./main2.css">
</head>
<body>
<div id="container">
<div id="nav">
<h1>Userfind</h1>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div id="main-search">
<input type="text" id="usersearch" name="usersearch" placeholder="Search for User here. Must be atleast 5 characters long." required
minlength="5" maxlength="30" size="60">
</div>
</div>
</div>
</body>
</html>
But no matter what I try, I can't figure out how to keep the input box on the same line.The CSS looks like this: 但是无论如何尝试，我都无法弄清楚如何将输入框保持在同一行.CSS看起来像这样：
body {
background-color: black;
}
#container {
background-color: purple;
margin-left: auto;
margin-right: auto;
}
#nav {
background-color: #404040;
color: white;
height: 39px;
line-height: 39px;
padding: 0px 10px 39px;
}
#nav h1 {
text-align: left;
float: left;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
}
#nav li {
float: left;
}
#nav a {
display: block;
text-align: center;
padding: 14px 16px;
background-color: #404040;
color: white;
text-decoration: none;
}
#nav p {
float: left;
}
#nav #main-search {
display: block;
float: left;
}
If I put the div "main-search" in the unordered list it stays on the same line. 如果我将div“ main-search”放在无序列表中，它将保持在同一行。 But how can I get it it to stay on the same line without putting in between the <ul> tags? 但是，如何在不放在<ul>标记之间的情况下使其保持同一行呢？
1 个解决方案
解决方案1
0 已采纳 2019-08-29 02:58:55
This is not a full answer by any means. 无论如何，这不是一个完整的答案。 But it includes some of the suggestions from the comments. 但这包括评论中的一些建议。 I changed #nav li to display: inline-block, along with removing some of the conflicting css that you had. 我将#nav li更改为显示：inline-block，同时删除了一些您有冲突的CSS。
I suggest doing the search feature as an li, or doing all nav links as separate divs using display: flex (aka flexbox). 我建议使用li来进行搜索，或者使用display：flex（又名flexbox）将所有的nav链接作为单独的div进行。
There's a short tutorial below that you can adapt to your case: https://www.freecodecamp.org/news/how-to-create-a-fully-responsive-navbar-with-flexbox-a4435d175dd3/ 下面有一个简短的教程，您可以根据自己的情况进行调整： https : //www.freecodecamp.org/news/how-to-create-a-fully-sensitive-navbar-with-flexbox-a4435d175dd3/
Your code that I added display: inline-block and removed some conflicting css: 我添加的代码显示：inline-block并删除了一些冲突的CSS：
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" href="./main2.css">
</head>
<body>
<div id="container">
<div id="nav">
<h1>Userfind</h1>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div id="main-search">
<div>
<input type="text" id="usersearch" name="usersearch" placeholder="Search for User here. Must be atleast 5 characters long." required
minlength="5" maxlength="30" size="60">
</div>
</div>
</div>
</div>
</body>
</html>
And: 和：
body {
background-color: black;
}
#container {
background-color: purple;
margin-left: auto;
margin-right: auto;
}
#nav {
background-color: blue;
color: white;
height: 39px;
line-height: 39px;
padding: 0px 10px 39px;
}
#nav h1 {
text-align: left;
float: left;
}
#nav ul {
list-style-type: none;
margin: 3px;
overflow: hidden;
}
#nav li {
display: inline-block;
}
#nav a {
text-align: center;
background-color: orange;
color: white;
text-decoration: none;
}
#nav p {
}
#nav #main-search {
margin-left: 27%;
margin-bottom: 50px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.