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/

Answer 2

浮动h1和ul。

您可能遇到问题，因为#header h1 ul:与ul不符。我不完全确定你想要匹配的是什么;如果它应该是ul的样式，那么就这样做#header ul。如果是h1，则执行#header h1。

Answer 3

这对我来说也适用于FF4和IE8：

<h1 style="display: inline;">IRIS</h1>
       <ul id="menu" style="display: inline;">              
            <li style="display: inline;">aaa</li>
            <li style="display: inline;">bbbb</li>
            <li style="display: inline;">ccccccc</li>
        </ul>

Answer 4

有很多方法可以实现这一目标。我会这样做：

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1, ul { display: table-cell; }
            li {
                float: left;
            }
        </style>
    </head>
    <body>
        <h1>LIPSUM</h1>
        <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
        </ul>
    </body>
</html>

或

        h1 { position: absolute; }
        ul { margin-left: 60px; }

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

4 个答案: