如何在没有"display:inline;"或"float:left;"的情况下创建水平列表？(或任何其他可能适用于此的修复程序)

我试图让链接列表留在有边框的框。使用display:inline;会导致链接框看起来很奇怪。这是它现在的样子

https://jsfiddle.net/9jtxjb1s/4/

代码:Html

<body>
    <div class="gridContainer clearfix">
    <div id="LayoutDiv1">
    <div id="container">
        <header>
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
        </header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>  
                <li><a href="link1.html">Link 1</a>
                    <ul>
                        <li><a href="gallery1.html">Gallery</a></li>
                    </ul>
                </li>
                <li><a href="link2.html">Link 2</a>
                    <ul>
                        <li><a href="gallery2.html">Gallery</a></li>
                    </ul>
                </li>
                <li><a href="link3.html">Link 3</a>
                    <ul>
                        <li><a href="gallery3.html">Gallery</a></li>
                    </ul>
                </li>
                <li><a href="link4.html">Link 4</a></li>
            </ul>
        </nav>
        <section>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
            <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </section>
        <footer>
            <p>&copy; Test</p>
        </footer>
    </div>
    </div>
    </div> 
</body>

主要的，相关的样式css (css在小提琴上的完整副本)

#container{
    background:#228b22;
    float:left;
    border:1px solid #000000;
    width:100%;
}
body {
    font-family:Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size:90%;
    margin:20px auto;
    text-align:center;
    line-height:1.4em;
/*  width:98%; */
    background:white;
}
header, section, article, footer,  nav{
    padding:10px 20px 20px;
    margin:10px;
    /* float:left; */
    width:auto;
    border:1px solid #000000;
}
header {
    display:block;
    position:relative;
    text-align:left;
}
nav {
    /* float:left; */
    text-align:center;
    display:block;
}
nav ul{
    margin-left:15%;
    padding:0;
    list-style:none;
    text-align:center;
}
nav ul li{
    float:left;
    width:150px;
    height:30px;
    line-height:30px;
    text-align:center;
    background:#4ea24e;
    border:1px solid #000000;
}
nav ul li a{
    text-decoration:none;
    color:black;
}
nav ul li li{
    background:#4ea24e;
    color:#fff;
    display:none;
    float:left;
    margin-left:-17.9%;
}
nav ul li li:hover{
    background:#7ab97a;
}
nav ul li li a{
    text-decoration:#8A5C2E;
    color:#black;
}
ul{
    text-align:left;
    margin-left:40%;
    padding:0;
}

谢谢

float可以导致元素在其容器之外;有时你需要添加额外的属性来避免这种行为(例如，div内浮动的东西，div外浮动的东西。为什么?)对于您的代码，您只需要删除float，并使元素display为inline-block。

nav ul li{
    display: inline-block;
    width:150px;
    height:30px;
    line-height:30px;
    text-align:center;
    background:#4ea24e;
    border:1px solid #000000;
}

工作演示:http://codepen.io/anon/pen/avogWb

PS:对不起，我发布了一个codepen，我有问题进入JSFiddle网站。

将此样式添加到您的样式表:

    #container > nav > ul {
        display: flex;
        -webkit-display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: center;
        -webkit-justify-content: center;
    }

更新小提琴

将此添加到您的CSS中以解决float问题

ul:after{
    content: "";
  display: table;
  clear: both;
}

不使用float:left，您可以使用下面的css来创建一个水平链接列表。

nav ul{
    margin: 0;
    font-size:0;
}
nav ul li{
    font-size: 14px;
    display:inline-block;
}

JSFiddle: https://jsfiddle.net/9jtxjb1s/6/

相关内容

最新更新

热门标签：