为什么这些标签不会出现在同一条线上？

Question

这是html，由于某种原因，这些和输入不会出现在同一行

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

这是与

一起使用的CSS

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

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

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

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

Answer 1

“一个或另一个原因”是您的<ul>是块级元素。显然你正朝着正确的方向前进，因为你将display: inline;放在了<form>元素的display: inline-block;和<li>上。

由于<ul>是<form>的兄弟，因此这两者都应该display: inline-block;。我可能会推荐一些vertical-align: middle;行动。

所以我将你的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;
}

这是一个JSFiddle。干杯！

Answer 2

试试这个......

.content-box {
	margin: 0 auto 0;
	width: 1000px;
}
.nav {
	margin: 0;
	padding: 0;
	width: 700px;
}

.nav li {

	float: left;
	margin: 0;
	padding: 0 6px;
	overflow: hidden;
}
.nav li a {
	color: #444;
	margin: 0;
	padding: 0;
	text-decoration: none;
}
.searchbox {
	width: 250px;
	float: right;
}

<div class="content-box">
	<div class="nav">
		<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>

		<form class="searchbox">
			<input name="search" type="text">
			<input type="submit">
		</form>
		</ul>
	</div>
</div>