Question

我需要在一行中显示几个相似的图像和文字，如下所示：

http://funedit.com/imgedit/soubory/small_4126372791396608500.jpg

我正在考虑使用一些li ul或inline-block，但没有人能正常使用它。我可能做错了。

我必须说我之前宣布了其他的事情：

li{
    padding: 0 30px;
    display: inline-block;
}
ul{
    list-style-position: inside;   
    list-style-type: none;         
}

我的尝试在这里： CSS：

.undernews{   /* This is background */
    margin-top: 10px;
    background-image: url("images/under_news_bg.png");
    background-repeat: repeat-x;
    height: 121px;
    width:  987px;
    display: table;
}
.sellgames{    /* This
    line-height: 2;
    width 987px;
    display: table-cell;
}

HTML：

<div class="undernews"></div>
<ul>
  <li><span class="sellgames">Counter-Strike 1.6 Steam <br><img src="images/CSsteam.png"></span</li>
  <li><span class="sellgames">Counter-Strike 1.6 Steam <br><img src="images/CSsteam.png"></span</li>
</ul>

有人可以写下我应该怎么做？或者如何在不修改现有的li和ul的情况下修复它？

Answer 1

您的HTML代码出现故障，因此请先尝试更改：

<div class="undernews">
<ul>
  <li><span class="sellgames">Counter-Strike 1.6 Steam <img src="images/CSsteam.png"></span></li>
  <li><span class="sellgames">Counter-Strike 1.6 Steam <img src="images/CSsteam.png"></span></li>
</ul>
</div>

CSS看起来像：

.undernews ul li {
   display: inline-block;
   list-style-type: none;
   padding-right: 0px;
}

.undernews ul li img {
    float: left;
    padding-left: 60px;
}

Working demo

Answer 2

尝试这个例子，对于一个简单的水平列表

CSS代码

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

HTML CODE

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>

Answer 3

像下面的代码一样更改CSS。

div.undernews ul li {
   display: inline-block;
   *display: inline;
   zoom: 1;
   list-style-type: none;
   background-color: #FFFFFF;
   padding: 10px;
}

div.undernews ul li img {
    display: block;
}
span.sellgames{
    line-height: 2;
    height: auto;
    position: static;
    text-align: left;
}

预览＆gt;＆gt; Minecraft Temp 的

CSS-显示内容

3 个答案: