列表项悬停间距[重复]

Posted 2023-03-06

【中文标题】列表项悬停间距[重复]

【英文标题】：List item hover spacing [duplicate]

【发布时间】：2016-07-17 19:44:06

【问题描述】：

我有 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;

【问题讨论】：

将 display 属性从 inline-block 更改为 block。

【参考方案1】：

在 .projects-list 中设置最小宽度即可。我玩的时候工作在 200px 左右

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

【参考方案2】：

您为 li 使用 href 标记，但 HTML 语法根本不允许 li 元素使用 href 属性。此外，您的锚标记已结束，但没有开始首先解决这些问题。

您正在尝试使用 id 选择器进行选择

#projects-list li:hover 

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

.projects-list li:hover 

【参考方案3】：

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

【参考方案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;

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