html 列表悬停移动其他元素

Question

我正在制作一个菜单页面，我希望它看起来像这样。 (我现在已经为所有元素设置了默认 img)。

披萨

---

pizza1               pizza2          pizza3
imgPizza1            imgPizza2       imgPizza3

沙拉

---

等等

我正在使用下一个代码:

<div id="MainContent_panelItems">
   <br></br><br></br><br></br>
   <p class="menuTitle">Pizza</p>
   <hr>
   </hr>
   <ul class="foodItems">
      <li style="height:100px;width:200px;">
         <p>Pizza Diavola</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
      <li style="height:100px;width:200px;">
         <p>Pizza Quattro Formaggi</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
      <li style="height:100px;width:200px;">
         <p>Pizza1RoPizza1RoPizza1Ro</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
      <li style="height:100px;width:200px;">
         <p>Pizza2RoPizza2RoPizza2Ro</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
      <li style="height:100px;width:200px;">
         <p>Pizza3RoPizza3RoPizza3Ro</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
      <li style="height:100px;width:200px;">
         <p>Pizza4RoPizza4RoPizza4Ro</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
      <li style="height:100px;width:200px;">
         <p>Pizza5RoPizza5Ro</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
      <li style="height:100px;width:200px;">
         <p>Pizza6RoPizza6RoPizza6Ro</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
      <li style="height:100px;width:200px;">
         <p>Pizza7RoPizza7RoPizza7Ro</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
   </ul>
   <br></br><br></br><br></br>
   <p class="menuTitle">Paste</p>
   <hr>
   </hr>
   <ul class="foodItems">
      <li style="height:100px;width:200px;">
         <p>Spaghete Carbonara</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
   </ul>
   <br></br><br></br><br></br>
   <p class="menuTitle">Salate</p>
   <hr>
   </hr>
   <ul class="foodItems">
      <li style="height:100px;width:200px;">
         <p>Salată Caesar</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
   </ul>
   <br></br><br></br><br></br>
   <p class="menuTitle">Băuturi</p>
   <hr>
   </hr>
   <ul class="foodItems">
      <li style="height:100px;width:200px;">
         <p>Coca-Cola 0.5l</p>
         <img align="center" src="Images/orderedList1.png"></img>
      </li>
   </ul>
</div>

CSS:

.foodItems li
{
    display: inline;
    float: left;
    padding: 10px;
}

.foodItems li:hover
{
    border-style:solid;
    border-color: #333;
    border-width: 1px;
}

p.menuTitle {
    font-weight: bold;
}

它看起来像这样:

我的问题是行位置和 menuTitles，而且当我将鼠标悬停在一个元素上时，其他元素如下图所示移动:

乐:

Answer 1

这里的问题是，border 仅在 :hover 上设置，因此整体 width 受到影响，整个布局变得困惑.你需要做的是，在正常状态下也将border-width设置为1px。

.foodItems li {
    display: inline;
    float: left;
    padding: 10px;
    border: 1px solid transparent;
}