我正在尝试做一个大页脚。我已尽力使链接显示为内联，但我无法这样做。请帮忙。谢谢
<!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 & 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>
这是我正在尝试制作的设计的视觉效果，
最佳答案
您看到人们解决此问题的典型方法是使用 float属性(property)。请注意，我添加了 overflow: hidden至 #footer清除 float 。
#footer { overflow: hidden; }
.contribute {
float: left;
width: 25%; }
http://jsfiddle.net/Wexcode/nxvdG/
如果您尝试坚持使用内联，您将使用类似的代码，只有内联元素在彼此相邻时表现不同。标记中的空格，即 </div> <div>将在两个元素之间产生间隙。为了使元素相互接触，您需要删除标记中的空白，例如 </div><div> .
.contribute {
width: 25%;
display: inline-block; }
关于html - 在 div 中内联显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11180252/