css - 添加另一个 div 时如何使 div 内联?

标签 css html

请快速查看此链接:

http://jsfiddle.net/8grSk/

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

我想在页面右侧添加与现有文本内嵌的文本。

这是怎么做到的?

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

谢谢大家!

詹姆斯

最佳答案

您可以像这样轻松地重写所有内容以容纳页脚 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/

-- 编辑

更改了 fiddle 以更好地适应您的悬停状态。

关于css - 添加另一个 div 时如何使 div 内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7807405/

相关文章:

css 大师 : how to swap too spans (inline-block, 没有固定宽度)?

css - 使用 CSS 的 SVG 渐变

css - 有没有更好的方法可以在柔性显示中的元素之间保持相同的间隙空间?

php - docker 上的 Magento 2 - 没有加载 css

php - 创建 'Browse user' 页面

javascript - 我如何决定哪些客户端可以看到页面,哪些客户端不能

jquery - 点击下拉菜单滚动

jquery - 将表格行推到底部并固定行数

javascript - 多个模态框 : no clue about javascript

jquery - 在移动设备上查看时,Bootstrap 会更改 div 上的类