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

概述美好的一天又一次. 我有一个(看似)简单的问题.我正在尝试显示< h1>和< ul>在同一条线上.我使用浮动,内联和许多其他方式,但它似乎不起作用.它就像标题不想与无序列表一起播放.所有帮助赞赏. html代码如下所示： <div class="page"> <div id="header"> <h1>IRIS</h1> <ul id="m 美好的一天又一次.

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

HTML代码如下所示：

<div >   <div ID="header">            <h1>IRIS</h1>            <ul ID="menu">                              <li><%: HTML.Actionlink("Forsíða","Index","Home")%></li>                <li><%: HTML.Actionlink("Fréttir","News")%></li>                <li><%: HTML.Actionlink("Greinar","Article")%></li>                <li><%: HTML.Actionlink("Síðan Mín","MySite")%></li>                <li><%: HTML.Actionlink("Spurt & Svarað","QA","Home")%></li>                <li><%: HTML.Actionlink("Upplýsingar","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;}

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

解决方法 您的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/

总结

以上是内存溢出为你收集整理的html – 如何让h1和ul坚持在同一条线上全部内容，希望文章能够帮你解决html – 如何让h1和ul坚持在同一条线上所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。