<li>高度与内容相符

时间：2016-09-11 04:49:49

标签： html css3

如何使边框覆盖所有文字内容？当文本很长时，我遇到了问题，然后它会溢出边界。谢谢你的帮助。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

添加以下内容：

height:auto;
min-height: 100%
overflow:auto;

见下文：

.fix-width
{
  width:300px;
  margin-left:auto;
  margin-right:auto;
  }
ul.obj-ans
{
  list-style-type: none;
  }
ul.obj-ans > li
{ 
height:auto;
min-height: 100%;
overflow:auto;

    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>

答案 1 :(得分：1)

简单解决方案：在每个li元素中添加一个div元素，其样式为 clear：两者，clear property指定元素浮动元素的哪些边不允许浮动。

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

为了获得最佳性能，清理代码和SEO，我建议你使用css类代替内联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>

在你的CSS中

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

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

.clearBoth{
   clear:both
}

答案 2 :(得分：1)

Adding the **overflow:auto** property to **li** to fit the content inside the div. avoiding the overflow.


.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;
    overflow:auto;
}

.content{
overflow: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>

答案 3 :(得分：0)

只需从列表标记中删除固定的最小高度，否则将其设置为自动最小高度并添加overflow：auto;这将作为您的要求。

.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;
    margin:5px auto;
    overflow: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>

相关问题
最新问题