Html 为什么这些标签不在同一行上？

这是html，出于这样或那样的原因，li和input不会在同一行

<div class="nav">
        <form class="searchbox">
        <input name="search" type="text">
    <input type="submit">
    </form>
    <ul>
     <li><a href="index.php">Home</a></li>
     <li><a href="Galleries.html">Galleries</a></li>
     <li><a href="Contact.html">Contact</a></li>
     <li><a href="Story.html">Story</a></li>
    </ul>
</div>

---

这是一个半专业的网站，有四个页面，所以我需要一些有用的东西。

原因之一是你的是块级元素。很明显，您的方向是正确的，因为您将display:inline；在和上显示：内联块；关于元素

由于是的同级，因此它们都应该具有display:inline block；。我可能会推荐一些垂直对齐：中间对齐；行动

因此，我将您的CSS更改为：

.searchbox {
    display: inline-block;
    padding-right: 2em; 
}

ul {
    display: inline-block;
    vertical-align: middle;
}

.nav {
    position:absolute;
    padding:.5em 0em .5em 2em;
    font-size:1.25em;
    margin: 0 0 98em 0em;
    background-color:black;
}

.nav li {
    display:inline-block;
    float:left;
    color:#7C6C5A;
}

这是一个例子。干杯

试试这个

.内容框{ 保证金：0自动0； 宽度：1000px； } .导航{ 保证金：0； 填充：0； 宽度：700px； } 李国荣先生{ 浮动：左； 保证金：0； 填充：0 6px； 溢出：隐藏； } 李娜先生{ 颜色：444； 保证金：0； 填充：0； 文字装饰：无； } .搜索框{ 宽度：250px； 浮动：对； }

---

如何在底部添加运行代码片段部分

.searchbox {
    display: inline-block;
    padding-right: 2em; 
}

ul {
    display: inline-block;
    vertical-align: middle;
}

.nav {
    position:absolute;
    padding:.5em 0em .5em 2em;
    font-size:1.25em;
    margin: 0 0 98em 0em;
    background-color:black;
}

.nav li {
    display:inline-block;
    float:left;
    color:#7C6C5A;
}