繁体   English   中英

右浮动链接变高

Right floating link gets higher

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我遇到一个链接问题,该链接在向右浮动时会比未向右浮动的链接增加另一个高度。 这是产生它的最少代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        body {font: normal 12px/1.6 Arial; }
        .btn {background-color: Red; color:#000; padding: 5px 15px 5px 15px; }
    </style>
</head>
<body>
    <div>
        <a class="btn" href="#">Nice link</a>
        <a class="btn" style="float: right;" href="#">Bad link</a>
    </div>
</body>
</html>

这就是结果。 “不良链接”高于“良好链接”。

如果我从身体样式中删除“ Arial”,看起来还可以。 但是我当然需要字体样式。

4 个回复

填充仅适用于块元素,并且我猜错误的链接由于浮动而像块一样,将display:block添加到.btn并将漂亮的链接浮动到左侧

http://jsfiddle.net/4Qs5J/

浮动元素有效地将其更改为块级元素(如果之前没有),则填充将不会应用于普通锚,但会应用于浮动锚。

您可以添加display: inline-block; 到未漂浮的锚点或漂浮在那一个左边。 内联块将保留其内联属性作为锚点,但是它将允许应用尺寸,填充和边距。 在版本7之后的IE中使用内联块。

首先,您需要声明身高以达到彼此的高度

向左飘浮;

请记住,高度也是通过填充设置的

无论如何,看起来您正在制作菜单,该怎么办

<ul>
<li style="float:left;"></li>
<li style="float:left;"></li>
</ul>

然后你有一个容器到你的两个对象

我以自己的方式做了同样的代码,希望对您有所帮助

// css

    <style>
        body { font-family:Arial, Helvetica, sans-serif; font-size:14px; }
        .container { height:40px;}
        .container a{ color:#FFF; padding:10px; padding:7px; }
        .btn {background-color: Red; color:#000;   }
    </style>

// HTML

    <div class="container">
        <a class="btn" href="#" style="float: left;">Nice link</a>
        <a class="btn" style="float: right;" href="#">Bad link</a>
    </div>
1 向右浮动

我正在设计一个使用HTML和CSS的网站,并且某处似乎没有可见的空白。 目前,我的网站如下所示: h1, h2 { font-family: 'Righteous', cursive; text-align: center; } body { font-family: 'R ...

2 更高精度的浮点计算

我想找到一种使用多个浮点数来表示单个数字的计算着色器中进行更高精度计算的方法。 我的目标是一个 mandelbrot 渲染器,您可以在其中进行比通常的浮点精度允许的更深的缩放。 性能不是很重要,因为它只会计算一次并存储在纹理中。 我正在 C# 中测试算法。 到目前为止,我设法以足够的准确度添加了 ...

3 文本变短时,不应用左右浮动文本和图像

我想用左图制作文字,然后用右图制作文字。 在小屏幕上,图像应显示在文本上方。 一切正常,直到文本变短为止。 长文本的外观: 它使用一些简单的CSS在不同的屏幕尺寸上具有不同的边距。 但是问题是,如果文本变短,浮动将无法正常工作。 长文本的外观: 这是我“ ...

4 调整窗口大小后,右浮动元素的显示在Chrome中变得混乱了吗?

我的网站页脚中有一个元素浮动到右侧,并且效果很好,除了在Chrome中,当我调整窗口大小时,我有某种样式将显示设置为无浮动块(请查看此处的示例),但是问题是,即使将float:right应用于窗口,当我将窗口重新调整为大尺寸时,该元素也会显示在页脚中其他元素的下方。 奇怪的是...取消选中fl ...

5 桌子向右浮动

我正在尝试在Outlook上进行自己的签名,但似乎表格无缘无故地向右浮动。 问题是我只能在Outlook上看到错误,因为在我的浏览器上,签名显示得很好。 实际情况如何: 使用的代码:您可以忽略p标签,因为它不会引起错误。 DEMO DEMO ...

6 股利未完全向右浮动

有一个社交菜单,我需要将其一直浮动到页面右侧并保持固定。 但是,它在两者之间的某处随机浮动。 只是在寻找可能的解决方法 这是小提琴: http : //jsfiddle.net/m7vaywmh/ HTML CSS: ...

2015-10-15 19:47:48 2 44   html/ css
7 div不在右侧浮动

我已经仔细研究了许多问同一件事的问题,据我所知,这些问题都不适合我的情况。 当然,我是新手,可能错过了联系。 无论如何,我有一个简单的网页正在为Facebook上的自定义标签设计。 我在右侧底部的链接(用于广告)正确浮动到右侧。 但是图像块和顶部的标题将不正确。 我将包括适用于这些元素 ...

8 div没有浮动权利

为什么蓝色div与绿色div不相邻? 这是html。 只有带边框的容器。 这是中间居中div的CSS。 蓝色div浮动权问题http://www.imagesup.net/?di=7135585031013 这是一个JSFiddle ...

2012-12-18 17:07:15 2 5399   css/ html
9 大文本不浮动对

我有一个带有表单字段的表单,我想将标签向右浮动,但是当标签中的文本较大时-浮动不起作用。 CSS 我的代码在这里 我哪里错了? UPD:关于 这是解决大文本问题的示例 。 但 工作正常) ...

10 通过浮动向右对齐Divs

我在让某些div浮动并正确对齐方面遇到麻烦。 我有两个div,其中包含工作正常的图像,我需要再添加两个,并且图像的行为方式相同。 我尝试使用相同的代码使当前的div正常工作,但是它们似乎自动将自己分配给与我要使用的其他图像相同的div。 //这里是代码。 我试图这样做是 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM