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