Question

请快速查看此链接：

http://jsfiddle.net/8grSk/

正如您所见，文本底部与页面左侧对齐

我想在页面右侧添加与已存在文本内联的文本。

这是怎么做到的？

我发现很难对齐所有这些div！

谢谢你们！

詹姆斯

Answer 1

您可以轻松地重写所有内容以容纳页脚ID内部的两个区域（左侧和右侧），如下所示：

<强> HTML

<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="footer" style="position:absolute;bottom:0;">

<div class="left">
    <a href="#">About Us</a>
    <a href="#">Accessibility</a>
    <a href="#">Recruiters</a>
    <a href="#">Contact Us</a>
</div>
<div class="right">
    <a href="#">About Us</a>
    <a href="#">Accessibility</a>
    <a href="#">Recruiters</a>
    <a href="#">Contact Us</a>
</div>

</div>

</body>

</html>

<强> CSS

 body {
    margin: 0;
    padding: 0;
}

#footer {
    background: #FFFFFF;
    border: 1px solid;
    color: #e6e6e6;
    height: 30px;
    width: 960px;
    position:absolute;
    float: left;
    margin: 0px 0px 0px 0px;
    padding:0;
}

#footer a {
    font: 13px helvetica;
    color: #0040FF;
    padding: 8px 12px 3px 3px;
}

#footer a:hover {
    font: 13px helvetica;
    color: #0040FF;
    padding: 8px 3px 3px 3px;
    text-decoration: underline;
}

.right {
    float:right;
}

.left {
    float:left;
}

演示

http://jsfiddle.net/8grSk/8/

- 编辑

更改小提琴以更好地适应您的悬停状态。

Answer 2

你应该重构HTML。相反，如果使用div，请使用无序列表<ul>，然后您可以列出您的四个链接并将<ul>左侧浮动到页脚内。

然后使用另一个<ul>，但这一次将它漂浮正确，瞧，按照你的意愿排列链接（我希望。）

<div class="footer1">

    <ul id="footer-left">
        <li id="footer1text">About Us</li>
        <li id="footer1text">Accessibility</li>
        <li id="footer1text">Recruiters</li>
        <li id="footer1text">Contact Us</li>

    </ul>
    <ul id="footer-right">
        <li id="footer1text">New Text</li>
    </ul>
</div>

CSS

.footer {
    background: #FFFFFF;
    border: 1px solid;
    color: #e6e6e6;
    height: 30px;
    width: 100%;
    position:absolute;
    margin: 0px 0px 0px 0px;
    padding:0;
    display: table;
}

.footer1 {
    background: #FFFFFF;
    height: 30px;
    width: 350px;
    position:absolute;
    margin: 0px 0px 0px 0px;
    padding:0;
}

#footer1text {
    font: 13px helvetica;
    color: #0040FF;
    padding: 8px 3px 3px 3px;
    display: table-cell;
}

#footer1text:hover {
    font: 13px helvetica;
    color: #0040FF;
    padding: 8px 3px 3px 3px;
    text-decoration: underline;
}

#footer-left li
{
    float: left;
}

#footer-right li
{
    float: right;
}

Working demo here：）

如何在添加另一个div时使div内联？

2 个答案: