-1

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

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

这是我正在尝试进行的设计的视觉效果， 在此处输入图像描述

4

2 回答 2

2

你看到人们完成这个问题的典型方式是使用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/

于 2012-06-24T18:58:24.727 回答
1

你可以用float: left;代替来做到这一点display: inline;。

你的 CSS 的问题是你覆盖#footer div了很多样式：

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

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

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

“如果你不能理解自己的代码，是时候休息一下并重构了。”

于 2012-06-24T19:05:26.677 回答