HTML/CSS - 右对齐和左对齐在同一行上?
问题描述:
首先,我知道有一些方法可以使文本处于同一行。但我不确定如何延续这一点。这是我到目前为止有:HTML/CSS - 右对齐和左对齐在同一行上?
Should be all the way across http://i33.tinypic.com/64i4uo.jpg
我怎么能够让它如此这般所有的方式,而不使用表?
这是HTML部分:
<p style="float: left;" class="details"><a href="#Top">To Top</a></p>
<p style="float: right" class="details">Latest Version: 0.3.6.17 | Downloads: 12 | <a href="#">Download</a></p>
这是CSS部分:
.details {
padding: 7px 15px;
margin: 20px 15px 15px 15px;
background: #111111;
}
,我真的很讨厌不得不求助于此表。有更容易的方法吗。谢谢任何能够帮助我的人。
答
这发散了一下,从你开始用什么,但我是如何在过去已经做过这样的:
CSS:
.details {
clear: both;
padding: 7px 15px;
margin: 20px 15px 15px 15px;
background: #111111;
text-align: right;
}
.toplink {
float: left;
}
HTML:
<div class="details">
<span class="toplink">To Top</span>
Latest Version: 0.3.6.17 | Downloads: 12 | Download
</div>
+0
非常感谢你!这很好用!我很抱歉没有从头说明。我马上就要睡着了,我只想把这件事情完成并且结束。非常感谢你。 – user 2009-10-28 20:32:02
答
将display:inline;
添加到您的.details
类中,并确保包含的div是块元素,并且其背景设置为灰色。
思南。
答
我就是这么做的:
<style type="text/css">
#right {
float: right;
}
.details {
margin: 0 auto;
line-height: 0;
}
</style>
<p class="details"><a href="#Top">To Top</a></p>
<p id="right" class="details">Latest Version: 0.3.6.17 | Downloads: 12 | <a href="#">Download</a></p>
棘手的部分是,你必须零出两个和顶部和底部边缘的行高。如果你这样做,然后漂浮在底部元素上。
应该是什么一路走过去?看起来好像'To Top'和其他细节部分已经在跨越页面宽度的相同“行”上。除了你的边缘/填充的元素。 – opello 2009-10-28 20:05:59
我的意思是灰色的背景。 – user 2009-10-28 20:13:07