html列表悬停移动其他项目_Html_Css

html列表悬停移动其他项目

html css

html列表悬停移动其他项目,html,css,Html,Css,我正在做一个菜单页，我希望它看起来像这样。（我现在已经为所有项目设置了默认img）披萨色拉等我正在使用下一个代码： <div id="MainContent_panelItems"> Pizza <hr> </hr> &

我正在做一个菜单页，我希望它看起来像这样。（我现在已经为所有项目设置了默认img）

披萨

色拉

等

我正在使用下一个代码：

<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>

看起来是这样的：

我的问题在于行位置和菜单项，而且当我将鼠标悬停在某个项目上时，其他项目也会移动，如下图所示：

乐：

这里的问题是，

边框

只设置在

：hover

上，因此整个

宽度

会受到影响，整个布局也会混乱。您需要做的是，在正常状态下也将

边框宽度设置为1px

.foodItems li{
显示：内联；
浮动：左；
填充：10px；
边框：1px实心透明；
}
这里的问题是，边框
仅设置在：hover
上，因此整个宽度
受到影响，整个布局混乱。您需要做的是，在正常状态下也将边框宽度设置为1px

.foodItems li{
显示：内联；
浮动：左；
填充：10px；
边框：1px实心透明；
}
或使用框大小：border box
@chipChocolate.py将其设置为True。但我也在确保它能与其他浏览器兼容。旧浏览器不支持框大小调整
@bucurvlad-Sure。。。给家长一个清除：两个。另外，溢出：隐藏的
也会起作用。@bucurvlad






这是无效的。没有
标记。与
相同，因为没有
标签。@Paulie\u D psst:我知道有人在使用IE 6，但这些错误直接向我袭来！：POr使用框大小：边框框@chipChocolate.py。但我也在确保它能与其他浏览器兼容。旧浏览器不支持框大小调整
@bucurvlad-Sure。。。给家长一个清除：两个。另外，溢出：隐藏的
也会起作用。@bucurvlad






这是无效的。没有
标记。与
相同，因为没有
标签。@Paulie\u D psst:我知道有人在使用IE 6，但这些错误直接向我袭来！：p您不必使用display:inline
如果使用的是浮点
则不必使用显示：内联如果您使用的是float
<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>

.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;
}