CODEWITHSUNDEEP
htmlcss
pramod patel
pramod patel

Reputation: 135

CSS: Align all ul in single line which are inside div

I have a div like below i need to align the 3 ul which is inside the li in single row using css.

<div id="printEmilCountDiv" >
            <li id="reports-print-email-count">
                <ul id="reports-print-email-count-container">
                    <li>Print count:</li>
                    <li id="printCount"></li>
                </ul>
                <ul >
                    <li>Email count:</li>
                    <li id="emailCount"></li>
                </ul>
                <ul >
                    <li>Other count:</li>
                    <li id="otherCount"></li>
                </ul>
            </li>
    </div>

Upvotes: 1

Views: 466

Answers (2)

Alfred
Alfred

Reputation: 21406

You may remove the first li and replace it with div. Then apply a styling like;

ul{
  margin-top: 0;
  margin-bottom: 0;
}

Which trims the margin. Here is a demo

And you may add float: left; to either ul or li to align them in a row, like this

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

As like this

try to this code 

#printEmilCountDiv, #printEmilCountDiv *{
 list-style-type:none;
  margin:0;padding:0;
}
#printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}
<ul id="printEmilCountDiv" >
            <li id="reports-print-email-count">
                <ul id="reports-print-email-count-container">
                    <li>Print count:</li>
                    <li id="printCount">po</li>
                </ul>
                <ul >
                    <li>Email count:</li>
                    <li id="emailCount">ec</li>
                </ul>
                <ul >
                    <li>Other count:</li>
                    <li id="otherCount"oc>oc</li>
                </ul>
            </li>
    </ul>

Or this like 

#printEmilCountDiv, #printEmilCountDiv *{
     list-style-type:none;
      margin:0;padding:0;
    }
    #printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}

 #printEmilCountDiv ul li{display:inline-block;vertical-align:top;}
    <ul id="printEmilCountDiv" >
                <li id="reports-print-email-count">
                    <ul id="reports-print-email-count-container">
                        <li>Print count:</li>
                        <li id="printCount">po</li>
                    </ul>
                    <ul >
                        <li>Email count:</li>
                        <li id="emailCount">ec</li>
                    </ul>
                    <ul >
                        <li>Other count:</li>
                        <li id="otherCount"oc>oc</li>
                    </ul>
                </li>
        </ul>

Upvotes: 1

Related Questions