如何让h1和ul在同一行显示？

Question

如何让h1和ul在同一行显示？

5

再次好日子。

我有一个（看起来）简单的问题。我想在同一行上显示<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;
}

如果有更好的想法，请发表 :)

- Siemsen

4个回答

0

将 h1 和 ul 都浮动。

您可能会遇到问题，因为 #header h1 ul: 与 ul 不匹配。我不确定您想要匹配什么；如果它是用于 ul 的样式，则只需使用此代码 #header ul。如果是用于 h1，则使用 #header h1。

- Jeff

我已经更新了我的帖子以反映所说的内容（和我忘记的内容），但仍然存在问题。（感谢您的提示） - Siemsen

0

这对我在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>

- jabal

2

兄弟，永远不要这样做内联样式。 - riwalk

当然，我只是想演示必须通过CSS设置的样式。 - jabal

0

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

<!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; }

- seler

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mathieu · Accepted Answer

您的h1选择器有误：

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

对于ul和li，您不需要使用float属性

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