2

我正在更改悬停时的字体真棒图标以使它们更大。我遇到的问题是，通过使 1 个图标变大，它会移动它旁边的其他图标。IE图标会上下移动。

我创建了这个基础小提琴来显示问题。我弄乱了填充和边距，试图在每个图标周围创建所需的空间，这样空间就足够大，以至于其他图标不会移动。我肯定是 CSS 菜鸟，所以请放轻松；）

这是小提琴：http: //jsfiddle.net/newmanw/MUHVD/

标记：

<title>Bootstrap 101 Template</title>
 <body>
    <div>
        <span>
            <i class="icon icon-warning-sign"></i>
            <i class="icon icon-ok"></i>
            <i class="icon icon-flag"></i>
        </span>
    </div>
  </body>

css

@import url('https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css');

.icon:hover{
    cursor: pointer;
    font-size: 28px;
}
4

4 回答 4

5

这对你有用吗？

.icon:hover{
    cursor: pointer;
    font-size: 28px;
 }
 .icon{
   float:left;
   width:30px;   
  text-align:center;
}

http://jsfiddle.net/MUHVD/1/

于 2013-03-12T02:02:36.597 回答
0

在某种程度上，这是做不到的。如果你把一堵墙的底砖做得更大，所有其他的砖都会被推来推去。

您可以使用一些 javascript 来执行此操作，这些 javascript 会强制图标进入absolute位置，在调整大小时保持它们全部静止。

您还可以为图标提供足够的“填充”（不一定padding）以在调整大小时保持位置笔直。

http://jsfiddle.net/MUHVD/5/

于 2013-03-12T02:00:53.910 回答
0

如果您将vertical-align图标上的属性设置为text-top，它将保持它们的垂直位置相同，但仍需要水平移动它们

.icon {
    vertical-align: text-top;
}

.icon:hover{
    cursor: pointer;
    font-size: 28px;
}

http://jsfiddle.net/MUHVD/6/

于 2013-03-12T02:11:23.627 回答
0

您应该使用float: left;并.icon指定在鼠标悬停后字体大小增长的宽度，例如。在这里你想增长到 28px 所以你需要指定width: 28px;你的.icon.

于 2013-03-12T02:33:32.980 回答