Question

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

代码： 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;
}

由于

Answer 1

浮动可能导致容器外的元素;有时你需要添加额外的属性来避免这种行为（例如floating stuff within a div, floats outside of div. Why?）。关于您的代码，您只需要移除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网站时遇到了问题。

Answer 2

将此样式添加到样式表中：

    #container > nav > ul {
        display: flex;
        -webkit-display: flex;

        flex-direction: row;
        -webkit-flex-direction: row;

        justify-content: center;
        -webkit-justify-content: center;
    }

更新了Fiddle

Answer 3

将此添加到您的css以修复浮动问题

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

Answer 4

您可以使用以下css制作水平的链接列表，而不是使用float:left。

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

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

如何创建没有“display：inline;”的水平列表或“浮动：离开;”？（或任何其他可能适用于此的修复）

4 个答案:

如何创建没有“display：inline;”的水平列表或“浮动：离开;”？ （或任何其他可能适用于此的修复）

4 个答案:

如何创建没有“display：inline;”的水平列表或“浮动：离开;”？（或任何其他可能适用于此的修复）