0

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

8 Answers 8

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

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

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

0

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

1
  • And it's nonsense to set property display: inline both in css and in html style attribute. May 6, 2015 at 10:39
0

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>

0

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

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.

0

include float property to and its value to left

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.