Question

我有4列链接作为列表项，每个链接在悬停时变为粗体。当您将鼠标悬停在其中一个链接上以使其变为粗体时，它还会增加列宽并推送后续列。如何防止它在悬停时推动其他列？

以下是网站：http://jmenoff-architect.com/update10/

HTML：

<ul class="projects-list">
  <li href="9thst.html">Greenwich Village Apartment</li></a>
  <li href="les-apt.html">Lower East Side Apartment Combination</li></a>
  <li href="tribeca.html">Tribeca Apartment Combination</li></a>        
</ul>

CSS：

.projects-list {
    display: inline-block;
    list-style-type: none;
    margin-left: -30px;
    padding-right: 10px;
    vertical-align:top;
  }
#projects-list li:hover {
  font-weight: 600;
}

Answer 1

在.projects-list中设置最小宽度就可以了。当我玩它时工作在200px左右

或者如果您希望它更易于维护，请在具有粗体版本文本的同一位置添加另一个透明div。

Answer 2

你使用li的href标签，但HTML语法根本不允许li元素的href属性。此外，您的锚标记已结束，但尚未首先开始修复这些问题。

您正尝试使用ID选择器

进行选择

#projects-list li:hover {}

但您正在使用类选择器。所以你应该选择这种方式

.projects-list li:hover {}

Answer 3

我建议更改<ul id="projects-list">的ID，以便每个ID都有唯一的ID，然后给予它们固定的宽度。这将解决您的问题

Answer 4

您的HTML格式不正确。我认为这就是你要做的事情。

<ul class="projects-list">
  <li>
    <a href="9thst.html">
        Greenwich Village Apartment
     </a>
   </li>
  <li>
      <a href="les-apt.html">
         Lower East Side Apartment Combination
      </a>
  </li>
  <li>
       <a href="tribeca.html">
          Tribeca Apartment Combination
        </a>
   </li>
</ul>

我认为它是负余量左边的组合，事实上当你加粗文本时它会占用更多空间，而哈希应该是一段时间。这个CSS应该适合你。

.projects-list {
    display: block;
    float: left;
    list-style-type: none;
    margin-left: 30px;
    padding-right: 10px;
    vertical-align:top;
  }

.projects-list li:hover {
  font-weight: 600;
}

我知道负边距会导致重叠。

列表项悬停间距

4 个答案: