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，当我将鼠标悬停在某个项目上时，其他人会在下面的图片中移动：

LE：

Answer 1

问题在于border仅在:hover上设置，因此整体width受到影响，整个布局变得混乱。您需要做的是，将border-width设置为1px也处于正常状态。

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

html list hover移动其他项目

1 个答案: