0

このページの一番下にあるもののように見えます。

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

ボックスを作成して並べて配置する簡単な方法はありますか?

私のものは、それぞれ380pxずつ下に行く階段のように見えます

ここに私のソースコードがあります:

    <!--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>タグから幅のルールを削除したことに注意してください。3 つのリンクすべてを並べて表示するには幅が足りませんでした。コードの動作を示す 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 に答える