Question

我在尝试将<li>标记内的特定元素占据<li>高度的100％时遇到问题。具体来说，我想要一个右边有边框的图标，以填充<li>元素的整个高度。

从列表中的最后一项可以看出，下载图标的边框不占用其<li>元素的整个高度。我该如何解决这个问题？

我的代码：

    <ul>
        <li>طلب المشروع من قبل الجهة المستفيدة<div class="download"><a href="#" class="active"><i class="fa fa-download"></i></a></div></li>
        <li class="list_background">وجود قرار تخصيص موقع من قبل المجلس البلدي<div class="download"><a href="#" class="active"><i class="fa fa-download"></i></a></div></li>
        <li>بكتاب الامانة العامة لمجلس الوزراء رقم 344 - 3679 المؤرخ<div class="download"><a href="#" class="inactive"><i class="fa fa-download"></i></a></div></li>
        <li class="list_background">على مهندس المشروع التأكد من استيفاء ما     يلي حسب ما جاء بكتاب الأمانة العامة لمجلس الوزراء رقم 344-3679 
         المؤرخ (مرفق صورة من الكتاب المذكور) :
         <br>- استلام متطلبات المشروع معتمدة من قبل الجهة المستفيدة.
         <br>- إعداد كراسة طلب المشروع.
         <br>- الحصول على موافقة وزارة  المالية على اعتماد ميزانية المشروع.
         <br>- شهادة خلو الموقع من العوائق.<div class="download"><a href="#"   class="inactive"><i class="fa fa-download"></i></a></div></li>
    </ul>

CSS：

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}
ul li {
  direction: rtl;
  text-align: right;
  padding: 0 1rem 0 0;
  margin: 0;
  font-size: 1.1rem;
  color: #8c97b2;
  font-weight: 400;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #dadfea;
  line-height: 54px;
  height: 100%;
}
ul li .download {
  height: 100%;
  float: left;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #dadfea;
  display: block;
}
ul li .download i {
  font-size: 22px;
  width: 54px;
  text-align: center;
  height: 100%;
}

Answer 1

要实现这一点，您必须使用表结构，这意味着使li标记充当表，内容充当表格单元格，图标充当另一个表格单元格。

还为文本添加容器，永远不要让它在任何容器上流动

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}
ul li {
  direction: rtl;
  text-align: right;
  padding: 0 1rem 0 0;
  margin: 0;
  font-size: 1.1rem;
  color: #8c97b2;
  font-weight: 400;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #dadfea;
  line-height: 54px;
  height: 100%;
  display: table;
  width:100%;
}
ul li .download {
  height: 100%;
  float: left;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #dadfea;
  display: tablle-cell;
}
ul li p{
  display:table-cell;
}
ul li .download i {
  font-size: 22px;
  width: 54px;
  text-align: center;
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
    <ul>
        <li><p>طلب المشروع من قبل الجهة المستفيدة</p><div class="download"><a href="#" class="active"><i class="fa fa-download"></i></a></div></li>
        <li class="list_background"><p>وجود قرار تخصيص موقع من قبل المجلس البلدي</p><div class="download"><a href="#" class="active"><i class="fa fa-download"></i></a></div></li>
        <li><p>بكتاب الامانة العامة لمجلس الوزراء رقم 344 - 3679 المؤرخ</p><div class="download"><a href="#" class="inactive"><i class="fa fa-download"></i></a></div></li>
        <li class="list_background">على مهندس المشروع التأكد من استيفاء ما     يلي حسب ما جاء بكتاب الأمانة العامة لمجلس الوزراء رقم 344-3679 
         المؤرخ (مرفق صورة من الكتاب المذكور) :
         <br>- استلام متطلبات المشروع معتمدة من قبل الجهة المستفيدة.
         <br>- إعداد كراسة طلب المشروع.
         <br>- الحصول على موافقة وزارة  المالية على اعتماد ميزانية المشروع.
         <br>- شهادة خلو الموقع من العوائق.</p><div class="download"><a href="#"   class="inactive"><i class="fa fa-download"></i></a></div></li>
    </ul>

Answer 2

您现在需要垂直对齐图标以实现我们需要在.download div之后添加sudo元素以垂直对齐图标

ul li .download:after{
 content:"";
 vertical-align:middle;
 display:inline-block;
 height:100%;
}
ul li .download a{
 display: inline-block;
 vertical-middle: middle;
}

检查结果HERE

并检查this article以获取垂直对齐元素的指南

希望一切顺利吗

如何在100％高度显示<li>的子元素？

2 个答案: