CSS：如何使无序列表之后的元素不从新行开始？

Question

我正在尝试制作一个具有输入框的简单导航栏。

    <!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>

但是无论如何尝试，我都无法弄清楚如何将输入框保持在同一行.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;
}

如果我将div“ main-search”放在无序列表中，它将保持在同一行。 但是，如何在不放在<ul>标记之间的情况下使其保持同一行呢？

Answer 1

无论如何，这不是一个完整的答案。 但这包括评论中的一些建议。 我将#nav li更改为显示：inline-block，同时删除了一些您有冲突的CSS。

我建议使用li来进行搜索，或者使用display：flex（又名flexbox）将所有的nav链接作为单独的div进行。

下面有一个简短的教程，您可以根据自己的情况进行调整： https : //www.freecodecamp.org/news/how-to-create-a-fully-sensitive-navbar-with-flexbox-a4435d175dd3/

我添加的代码显示：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>

和：

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;
}

CSS：如何使无序列表之后的元素不从新行开始？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-08-29 02:58:55

CSS：如何使无序列表之后的元素不从新行开始？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-08-29 02:58:55

解决方案1
0 已采纳 2019-08-29 02:58:55