html - 仅带有 Image Css 的水平菜单

Question

我是 Asp.net 和 CSS 的新手。我需要像这样只显示水平菜单图像

image 1  image 2  image 3 image 4

所以我试过这样

CSS

 #UlIcon
   {
    height: 100%;
    list-style:list-style-image;
    text-align:center;
    padding-left: 5px;
   }

    #UlIcon li { display:inline;  width : 100px; height:100%;}

   #LiNew
   {
    list-style-image:url(/IMG/New.png);
   }

    #LiSave
   {
    list-style-image:url(/IMG/Save.png);
   }

    #LiDelete
   {
    list-style-image:url(/IMG/Delete.png);
   }

    #LiLog
   {
    list-style-image:url(/IMG/New.png);
   }
   #Padding-right {padding-right:15px;}

ASP.NET 代码

<div id="DivMenuRight">
                 <ul id="UlIcon">
                    <li id="LiNew"></li>
                    <li id="LiSave"></li>
                    <li id="LiDelete"></li>
                    <li id="LiLog"></li>
                 </ul> 
         </div>

但它显示为空。如果我删除 li css 中的 display: inline，图像将垂直显示在 div 的中心。这里做错了什么？我如何获得解决方案？

我正在使用 Visual Studio 2008 和 CSS2.1

Answer 1

css list-style-image 将在每个点或列出的文本旁边放置一个图像。它充当图像子弹

我觉得你想要这个

<div id="DivMenuRight">
   <ul id="UlIcon">
       <li id="LiNew">
          <img src="link1">
       </li>
       <li id="LiSave">
           <img src="link2">
       </li>
       <li id="LiDelete">
          <img src="link3">
       </li>
       <li id="LiLog">
          <img src="link4">
       </li>
   </ul>
</div>

然后你可以使用css来显示所有的列表元素inline-block

示例 display:inline-block

这是一个片段

img {
  display:inline-block;
  width:50px;
  height:50px;
}
li {
  display:inline-block;
}

<div id="DivMenuRight">
                 <ul id="UlIcon">
                    <li id="LiNew">
                      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTCjDQxLj9LSCLsCI2iCDEawZVlJ7tlRuBQDHenXo_KaFhdTUiTGw">
                    </li>
                    <li id="LiSave">
                       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqyRrA_-5TM0vpRU8BcTPFpGubyzgHGtvE9FQzpnVMPnKnoZwkmQ">
                    </li>
                    <li id="LiDelete">
                       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShZ_bYswgHlQLrUn8egsNTTZn5nCmSz1NcFmvtUzujpZhrBflUiQ">
                    </li>
                    <li id="LiLog">
                       <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTCjDQxLj9LSCLsCI2iCDEawZVlJ7tlRuBQDHenXo_KaFhdTUiTGw">
                    </li>
                 </ul> 
         </div>