CSS float将内容向下移动
[英]CSS float moves content down
问题描述
测试用例
我有3个简单的文本案例如下：
<div style="border: 1px solid #000;">
<a href="#" style="">Text1</a>
<a href="#" style="">Text2</a>
<a href="#" style="float: right">Text3</a>
</div>
在IE8，Firefox（23）中检查这一点，正如预期的那样Text3链接正确对齐。 一旦我向链接添加边框， Text3就会向下移动一个像素（边框大小）
<div style="border: 1px solid #000;">
<a href="#" style="border: 1px solid #000;" href="#" >Text1</a>
<a href="#" style="border: 1px solid #000;">Text2</a>
<a href="#" style="border: 1px solid #000; float: right" href="#">Text3</a>
</div>
现在，如果我尝试向链接添加填充， Text3会进一步下降（12像素填充+ 1像素边框）
<div style="padding: 20px 20px 20px 20px; border: 1px solid #000;">
<a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000;">Text1</a>
<a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000;">Text2</a>
<a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000; float: right">Text3</a>
</div>
问题浮动元素时，似乎忽略了填充和边框大小，并使用了元素的实际位置。 我有一个多主题网页。 用户可以从jQuery UI Theme roller选择任何主题在每个主题中，我用于项目的样式，具有不同的填充大小（和字体大小），这使得无法在CSS中硬编码特定值以使其保持在同一行。
问题这种行为是否可以避免（我做错了）？ 是否有解决方法使这些链接保持在同一行（最好只有css）？
1 个解决方案
解决方案1
3 已采纳 2014-02-21 03:50:22
如果设置了其他a元素，以display: inline-block ，他们都会以同样的方式行事。 例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
a {display: inline-block; padding: 12px;}
</style>
</head>
<body>
<div style="border: 1px solid #000;">
<a href="#" style="">Text1</a>
<a href="#" style="">Text2</a>
<a href="#" style="float: right">Text3</a>
</div>
</body>
</html>
CSS-浮动：右移元素，不在同一级别
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.