如何让h1和ul坚持在同一条线上

Question

美好的一天又一次.

我有一个(看似)简单的问题.我正在尝试显示<h1>和<ul>在同一条线上.我使用浮动,内联和许多其他方式,但它似乎不起作用.它就像标题不想与无序列表一起播放.所有帮助赞赏.

html代码如下所示:

<div class="page">
   <div id="header">
            <h1>IRIS</h1>


            <ul id="menu">              
                <li><%: Html.ActionLink("Forsíða", "Index", "Home")%></li>
                <li><%: Html.ActionLink("Fréttir", "Index", "News")%></li>
                <li><%: Html.ActionLink("Greinar", "Index", "Article")%></li>
                <li><%: Html.ActionLink("Síðan Mín", "Index", "MySite")%></li>
                <li><%: Html.ActionLink("Spurt & Svarað", "QA", "Home")%></li>
                <li><%: Html.ActionLink("Upplýsingar", "Index", "Information")%></li>
            </ul>
    </div>
 </div>

我正在使用的CSS代码如下所示:

.page
{
width: 70%;
margin-left: Auto;
margin-right: Auto;
}



body
{
margin:0;
padding:0;    
background: url('/Content/Image/background-gradient.png') repeat-x;
}


#header
{
background-color: Gray;
}

#header h1:
{
margin:0;
padding:0;
display:inline;
}

ul#menu
{
display:inline;
border:solid;
border-width:1px;
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
margin: 0;
text-align: right;
}

ul#menu li
{
display: inline;
list-style: none;
}

ul#menu li#greeting
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}

ul#menu li a
{
padding: 5px 10px;
float:left;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
}

ul#menu li a:hover
{
background-color: #fff;
text-decoration: none;
}

ul#menu li a:active
{
background-color: #a6e2a6;
text-decoration: none;
}

ul#menu li.selected a
{
background-color: #fff;
color: #000;
}

#main
{
border: solid black;
clear:both;    
width:75%;
padding: 30px 30px 15px 30px;
margin-bottom: 30px;
}

好的,所以找到了问题的答案,感谢Mathieu和其他所有人.这是我用过的:

#header h1
{
    margin:0;
    padding:0;
    padding-left:7px;
    display:inline;
}

ul#menu
{
    width:85%;
    float: right;
    display:inline;
    padding: 0 0 2px;
    margin: 0;
    text-align: right;
}

如果有人想到更好的东西请发帖:)

Answer 1

您的h1选择器错误:

h1
{
    margin:0;
    padding:0;
    display:inline;
}

而对于ul和li,你不需要漂浮

ul#menu
{
    display:inline;
    border:solid;
    border-width:1px;
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    margin: 0;
    text-align: right;
}

ul#menu li
{
    display: inline;
    list-style: none;
}

请看这里的小提琴:http://jsfiddle.net/Y6D6p/