CODEWITHSUNDEEP
css
Hai Truong IT
Hai Truong IT

Reputation: 4187

How do I get display:inline-block to be inline?

<ul class="random-list">
   <li>
       <div class="random-container">
           <div class="inline-block" style="vertical-align: top;">
               <img src="" />
           </div>
           <div class="inline-block" style="vertical-align: top;">
               <a href="">Name</a>
           </div>
       </div>
   </li>
</ul>

And css:

.random-container {
    margin-bottom: 10px;
    width: 100%;
}
.inline-block {
    display: inline-block;
}

Result:

Error

How to fix this error:

Fix

Upvotes: 0

Views: 113

Answers (5)

Prashobh
Prashobh

Reputation: 9544

<ul class="random-list">
   <li>
       <img src=""/>
       <a href="">Name</a>
   </li>
</ul>

#random-list
{
   float:left;
}

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Hey now according your design

you give to li properties display:block;

as like this

li{
display:block;
}

or this 

.random-list li{
display:block;
}

Live demo http://jsfiddle.net/GrZLW/

Upvotes: -1

ZZ-bb
ZZ-bb

Reputation: 2165

Do you have enough space on your screen? Your code works for me as it works in this fiddle:

That said: another +1 goes to Truth's answer. Theres no need to use so many divs you're currently using.

Upvotes: 1

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

How about you don't use inline-block at all, and get rid of all of those unnecessary divs.

<ul class="random-list">
   <li>
       <img src="" />
       <a href="">Name</a>
   </li>
</ul>

Live Example

Upvotes: 6

Damien
Damien

Reputation: 1217

Giving both elements a float: left would be a better option. Check this Fiddle.

Upvotes: 1

Related Questions