Question

这是我的代码，我希望对齐方式相同

当我插入border-left时，我的文字会向右侧移动，但我希望所有文本都以相同的方式对齐。

当我将它悬停在同样的情况下时。

如果删除border-left，则文本对齐方式正常，但如果有边框，我如何获得相同的对齐方式？

<div class="set-leftcol">
  <div class="leftcol-box">
    <div class="leftcol active">
       <div class="sett-i"><i class="fa fa-cog "></i></div>
       <div class="sett-title">General</div>
    </div>

    <div class="leftcol">
       <div class="sett-i"><i class="fa fa-key"></i></div>
       <div class="sett-title">Security</div>
    </div>
  </div>

  <div class="leftcol-box">
    <div class="leftcol">
       <div class="sett-i"><i class="fa fa-lock"></i></div>
       <div class="sett-title">Privacy</div>
    </div>

    <div class="leftcol">
       <div class="sett-i"><i class="fa fa-cog"></i></div>
       <div class="sett-title">Timeline</div>
    </div>

    <div class="leftcol">
       <div class="sett-i"></div>
       <div class="sett-title">Blocking</div>
    </div>
  </div>

  <div class="leftcol-box">
    <div class="leftcol">
       <div class="sett-i"><i class="fa fa-bell"></i></div>
       <div class="sett-title">Notification</div>
    </div>

    <div class="leftcol">
       <div class="sett-i"><i class="fa fa-mobile"></i></div>
       <div class="sett-title">Mobile</div>
    </div>

    <div class="leftcol">
       <div class="sett-i"><i class="fa fa-rss-square"></i></div>
       <div class="sett-title">Followers</div>
    </div>
  </div>
</div>

http://codepen.io/anon/pen/NqGRqG

Answer 1

将您的.leftcol更改为：

.leftcol {
   float: left;
   clear: both;
   width: 250px;
   cursor: pointer;
   background-color: #EBF9FF;
   border-left: 4px solid  transparent;
}

codepen

Answer 2

:hover状态添加4px边框导致错误对齐，因此悬停时元素会更宽一些。

防止这种情况的一种方法是为.leftcol元素添加透明边框，这样当它们悬停时，只有边框颜色发生变化而不是宽度：

.leftcol {
    border: 4px solid transparent;
}

另一种选择是在其上使用4px填充，并在悬停时删除它。这基本上与上面的技巧相同，但是对于非悬停元素使用填充占位符：

.leftcol {
    padding-left: 4px;
}
.leftcol:hover {
    padding-left: 0;
}

Answer 3

我不知道您是否故意将标记复杂到这个程度，因为您需要使用空<div>进行更深入的操作或者意外地执行此操作。

如果您没有更好的方法来解决问题，我建议您查看下面的笔： Codepen link to simplify the above markup

我已将您的标记降低到最低级别，但却达到了您期望的相同结果。希望它可以帮助你。干杯！

在悬停时添加边框时，使菜单项对齐相同

3 个答案: