Question

我正试图做一个大页脚。我已尽力使链接显示为内联但我无法这样做。请帮忙。感谢

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

#footer{
    width:auto;
    height:600px;   
    background:url(footer.png);
}

#footer div{float:left; width:43.5%}
#footer div:nth-child(2n+1){clear:none}
#footer div:nth-child(3n+1){clear:left}
#footer div li a{float:none; width:auto; display:inline; font-size:1em; padding:0; line-height:1.5em; background-color:transparent}
#footer .contribute{border:none; background-color:transparent}

#footer div h4{transition:color 0.3s;  -moz-transition:-color 0.3s; -ms-transition:color 0.3s; -o-transition:color 0.3s; -webkit-transition:color 0.3s}

#footer div:hover h4{color:#e53b2c}

#footer div:nth-child(2n){clear:left}

#footer div{width:100%; clear:both}

#footer .contribute{background-color:rgba(255,255,255,0.8); border-bottom:10px solid rgba(0,0,0,0.025); background-color: transparent;
    border: medium none;}

#footer div li {display:block; width:94.5%; float:left; font-size:0.95em; }

#footer li{padding:0.125em 0}

#footer a{border-bottom:1px solid rgba(0,0,0,0.1)}

#footer a:hover{border-bottom:1px solid rgb(65,183,216)}

#footer a:active, #footer a:focus { background-color:#e53b2c; border: none; } 

</style>
</head>
<body>
    <div id="footer">
    <div class="contribute">
        <h4>Best of Design</h4>
    <ul>
        <li><a href="http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/">Responsive Design</a></li>

    </ul>
    </div>
    <div class="contribute" >
        <h4>Best of Coding</h4>
    <ul>
        <li><a href="http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/">JavaScript &amp; jQuery</a></li>
    </ul>
    </div>
    <div id="contribute">
        <h4>Smashing Hub</h4>
        <ul>
            <li><a href="http://www.smashingmagazine.com">Smashing Magazine</a></li>

        </ul>
    </div>
    <div class="contribute">
        <h4>Other Resources</h4>
        <ul>
            <li><a href="http://www.smashingmagazine.com/2011/09/08/to-five-smashing-years-and-a-free-anniversary-ebook-treat/">Free Anniversary eBook</a></li>
        </ul>
    </div>           
</div>    
</body>
</html>

以下是我想要制作的设计的视觉效果， enter image description here

Answer 1

您看到人们解决此问题的典型方法是使用float属性。请注意，我已将overflow: hidden添加到#footer以清除浮动广告。

#footer { overflow: hidden; }
.contribute {
    float: left;
    width: 25%; }

http://jsfiddle.net/Wexcode/nxvdG/

如果你试图坚持使用内联，你将使用类似的代码，只有当内联元素彼此相邻时表现不同。标记中的空格，即</div> <div>将在两个元素之间产生间隙。要使元素触及，您需要删除标记中的空白区域，例如</div><div>。

.contribute {
    width: 25%;
    display: inline-block; }

http://jsfiddle.net/Wexcode/TkxKm/

Answer 2

您可以使用float: left;代替display: inline;来完成此操作。

CSS的问题在于您大量覆盖#footer div的样式：

#footer div{width:100%; clear:both}

这是其中之一，也是打破布局的主要原因。

尝试删除部分样式并重构它以清理一下。你会为此感谢我们。

“如果你无法理解自己的代码，那就该休息和重构了。”

在div中显示内联

2 个答案: