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

Question

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

<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.干杯!