Question

我有一个4个链接。我希望他们都在同一排。其中两个位于中心，另外两个位于右侧。我把它们包裹了两个和两个，但我无法让它工作。

我的css看起来像这样：

#links_center {

}
#links_right {
    float: right;

}

但它不起作用。右边的链接在前两个链接下。有人可以帮助我吗。

Answer 1

这是一种方法，假设您的链接位于固定宽度的容器中。请记住，这不是唯一的方法，只是一个可能适合您的快速解决方案：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Links Test</title>

        <style type="text/css">
            #links_center {
                float: left;
                width: 600px;
            }

            #links_right {

            }
        </style>
    </head>
    <body>
        <div style="width: 800px">
            <div id="links_center">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
            </div>

            <div id="links_right">
                <a href="#">Link 3</a>
                <a href="#">Link 4</a>
            </div>
        </div>
    </body>
</html>

Answer 2

float:right仅在#links_right集在源代码中设置的#links_center之前时才有效。重新排列源代码或使用中心集上的float:left并使用填充/边距放置在您想要的位置。

Answer 3

它可能有助于CSS确定宽度，因为它听起来可能没有足够的宽度使它们水平排列。也试着向左浮动。另一个选择是制作一张桌子。

div浮动到一个居中的div旁边？

3 个答案: