CODEWITHSUNDEEP
htmlcss
user4422481
user4422481

Reputation:

create horizontal list in css

i wish to place 3 box in a horizontal list. The code that i used is

<div class="rowtitle">
    <ul>
        <li style="display: inline;">
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername"><? echo $first_block_text; ?></div>
                </a>
            </div>
        </li>   
        <li style="display: inline;">
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername"><? echo $second_block_text; ?></div>
                </a>
            </div>
        </li>   
        <li style="display: inline;">
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername"><? echo $third_block_text; ?></div>
                </a>
            </div>
        </li>   
    </ul>
</div>

css that i used is

.rowtitle ul 
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
#rowtitle ul li 
    { 
        display: inline; 
    }

#rowtitle ul li a 
    { 
        text-decoration: none; 
    }

but the boxes are not getting arranged in a horizontal list. can anyone tell me how to do it

Upvotes: 0

Views: 202

Answers (8)

Raki
Raki

Reputation: 535

include float property to and its value to left 

#rowtitle ul li 
{ 
    float: left;
    padding:2px;
}

Upvotes: 0

ketan
ketan

Reputation: 19341

Use display:table and display:table-cell will solved your issue:

.rowtitle ul {
  display: table;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#rowtitle ul li {
  display: inline;
}
#rowtitle ul li a {
  text-decoration: none;
}
<div class="rowtitle">
  <ul>
    <li style="display: table-cell; padding: 0 10px;">
      <div class="service-wrapper1">
        <a href="#">
          <div class="wrappername">first_block_text;</div>
        </a>
      </div>
    </li>
    <li style="display: table-cell; padding: 0 10px;">
      <div class="service-wrapper1">
        <a href="#">
          <div class="wrappername">second_block_text;</div>
        </a>
      </div>
    </li>
    <li style="display: table-cell; padding: 0 10px;">
      <div class="service-wrapper1">
        <a href="#">
          <div class="wrappername">third_block_text;</div>
        </a>
      </div>
    </li>
  </ul>
</div>

Hope it helps.

Upvotes: 0

Divyesh Ladani
Divyesh Ladani

Reputation: 23

#rowtitle ul li 
    { 
        display: inline-block; 
    }

Upvotes: 3

wupeng
wupeng

Reputation: 63

css:

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after { clear: both; }
.rowtitle ul li { float: left; }

html:

<div class="rowtitle">
    <ul class="clearfix">
        <li><li>
        <li><li>
        <li><li>
    </ul>
</div>

Upvotes: 0

Sanjay Gohil
Sanjay Gohil

Reputation: 144

remove ul li use only div if possible
here is html code 

<div class="rowtitle">

            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">box1</div>
                </a>
            </div>

            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">box2</div>
                </a>
            </div>

            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">box3</div>
                </a>
            </div>

</div>

and here is css 

.service-wrapper1
{
    display:inline-block;
    width:20%;
}

here is fiddle

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

You are using id for showing <li> styles but used class in html and for 1st line css.. Try to change it like this: Demo

CSS:

#rowtitle ul 
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
#rowtitle ul li 
    { 
    display: block; 
    float:left; /* instead you can use  display: inline-block;    */
    background-color:#ccc; margin-right:2px;
    }

#rowtitle ul li a 
    { 
        text-decoration: none; 
    }

HTML:

<div id="rowtitle">
    <ul>
        <li >
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">1</div>
                </a>
            </div>
        </li>   
        <li >
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">2</div>
                </a>
            </div>
        </li>   
        <li >
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">3</div>
                </a>
            </div>
        </li>   
    </ul>
</div>

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

The problem is that you use block level elements inside li. One solution is to use float: left:

.rowtitle ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#rowtitle ul li {
  display: inline;
}
#rowtitle ul li a {
  text-decoration: none;
}
.wrappername {
  float: left;
  padding: 0 10px 0 10px;
}
div.wrappername:hover {
  text-decoration: underline;
}
<div class="rowtitle">
  <ul>
    <li style="display: inline;">
      <div class="service-wrapper1">
        <a href="#">
          <div class="wrappername">menu 1</div>
        </a>

      </div>
    </li>
    <li style="display: inline;">
      <div class="service-wrapper1">
        <a href="#">
          <div class="wrappername">menu 2</div>
        </a>

      </div>
    </li>
    <li style="display: inline;">
      <div class="service-wrapper1">
        <a href="#">
          <div class="wrappername">menu 3</div>
        </a>

      </div>
    </li>
  </ul>
</div>

Upvotes: 0

Martin Heraleck&#253;
Martin Heraleck&#253;

Reputation: 5779

Don't use display: inline. Use float: left instead.

Upvotes: 0

Related Questions