Imran Imran - 2 months ago 14
HTML Question

<li> height fit with content

How to make the border cover all the text content? I got the problems when the text was very long, then it will overflow the border. Thanks for any help.



.fix-width
{
width:300px;
margin-left:auto;
margin-right:auto;
}
ul.obj-ans
{
list-style-type: none;
}
ul.obj-ans > li
{
border: 2px solid purple;
border-radius: 7px;
background-color: #ffe0ff;
padding: 5px;
min-height: 52px;
margin:5px auto;
}

<div class="fix-width">
<ul class="obj-ans">
<li>
<div style="float:left; width:10%;">
A
</div>
<div style="float:left; width:90%;">
<div ng-bind-html="questionData.option1_bm" class="ng-binding"><p>Cyberjaya dilengkapi dengan kemudahan berteknologi tinggi.</p></div>
</div>
</li>
<li>
<div style="float:left; width:10%;">
B
</div>
<div style="float:left; width:90%;">
<div ng-bind-html="questionData.option2_bm" class="ng-binding"><p>Puan Maimunah berasa rindu kepada anaknya yang bekerja di Cyberjaya.</p></div>
</div>
</li>
<li>
<div style="float:left; width:10%;">
C
</div>
<div style="float:left; width:90%;">
<div ng-bind-html="questionData.option3_bm" class="ng-binding"><p>Semua murid-murid di Cyberjaya beruntung kerana mendapat pendidikan yang moden.</p></div>
</div>
</li>
<li>
<div style="float:left; width:10%;">
D
</div>
<div style="float:left; width:90%;">
<div ng-bind-html="questionData.option4_bm" class="ng-binding"><p>Sebanyak 50 murid mengikuti lawatan sambil belajar ke Cyberjaya.</p></div>
</div>
</li>
</ul>
</div>




Answer

SIMPLE SOLUTION: Add a div element inside each li element with style clear: both, clear property specifies on which sides of an element floating elements are not allowed to float.

<li>
    <div style="float:left; width:10%;">
        C
    </div>
    <div style="float:left; width:90%;">
        <div ng-bind-html="questionData.option3_bm" class="ng-binding"><p>Semua murid-murid di Cyberjaya beruntung kerana mendapat pendidikan yang moden.</p></div>
    </div>
    <div style="clear:both"></div>
</li>

For best perfomance, clean code and SEO, I recommended to you use css classes instead inline css.

<li>
    <div class="first">
        C
    </div>
    <div class="second">
        <div ng-bind-html="questionData.option3_bm" class="ng-binding"><p>Semua murid-murid di Cyberjaya beruntung kerana mendapat pendidikan yang moden.</p></div>
    </div>
    <div class="clearBoth"></div>
</li>

In your CSS

.first {
   float:left; width:10%;
}

.second{
   float:left; width:90%;
}

.clearBoth{
   clear:both
}
Comments