CODEWITHSUNDEEP
htmlcss
user3009924
user3009924

Reputation: 59

CSS- Display things in line

i need to display few similar images and text in one line, like here:

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

I was thinking about using some li ul or inline-block but noone of it work correctly for me. I am probably doing something really wrong.

I have to say i am declarate li ul for something else before:

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

My try of it is here: 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>

Can somebody write me down how it should be ? Or how can i fix it without ediiting existing li and ul ?

Upvotes: 0

Views: 110

Answers (3)

madhushankarox
madhushankarox

Reputation: 1477

Change your CSS like following code. 

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

Preview >> Minecraft Temp

Upvotes: 0

ohboy21
ohboy21

Reputation: 4319

You have failures in your HTML code, so try to change to this first:

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

And the CSS looks like:

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

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

Working demo

Upvotes: 1

WhiteLine
WhiteLine

Reputation: 1991

try this example , for a simple horizontal list

CSS CODE

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

Upvotes: 0

Related Questions