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>

但它显示为空。如果我在display: inline中移除li css，则图片会垂直显示在div的中心。这里有什么问题？我如何获得解决方案？

使用Visual Studio 2008 and 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>

仅使用Image Css的水平菜单

1 个答案: