0

它看起来像此页面最底部的那个：

http://www.microsoft.com/en-us/default.aspx

有没有更简单的方法来创建盒子并将它们并排放置？

我的看起来像一个楼梯，每个楼梯向下 380 像素

这是我的源代码：

    <!--External Links-->   <div id="external_links">
    <div>
        <ul style="height:380px; width:240px; max-width:240px;" id="Rowone">
        <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li>
        </ul>
        <ul style="height:380px; width:240px; max-width:240px;" id="Rowtwo">
        <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li>
        </ul>
        <ul style="height:380px; width:240px; max-width:240px;" id="Rowthree">
        <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li>
        </ul>
    </div>
4

2 回答 2

0

让我们重新组织和简化您的代码。我删除了额外的<ul>标签——这些标签会阻止链接彼此相邻显示。 

<!--External Links-->   <div id="external_links">
<div>
    <ul style="height:380px;" id="Rowone">
        <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li>
        <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li>
        <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li>
    </ul>
</div>

<li>现在为标签添加一点 CSS 定义。

li {
    display: inline-block;
}

请注意，我从您的剩余<ul>标签中删除了宽度规则 - 它的宽度不足以允许所有三个链接并排显示。这是一个 JSfiddle 来演示实际代码。 http://jsfiddle.net/VAP3X/

于 2013-06-22T20:31:29.983 回答
0

我想这可能是你正在寻找的：（
检查这个http://jsfiddle.net/LpMfZ/）

<!--External Links-->
<div id="external_links">
<ul id="Rowone">
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
</ul>
<ul id="Rowtwo">
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
</ul>
<ul id="Rowthree">
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a>
    </li>
</ul>

在你的 CSS 文件中：

#external_links ul {
display: inline-block;
height:380px;
width:140px;
max-width:240px;
}
#external_links ul li {
list-style:none;
line-height: 0px;
}
于 2013-06-22T20:33:36.853 回答