Question

我有一个导航菜单，第一个项目用图标替换内容。我这样做是通过将主要元素的font-size设置为0px，然后添加after元素。这似乎是一种常见的做法，它迄今为止运作良好。

但是我似乎无法将after元素与导航菜单的其余部分对齐。

我开始玩line-height和vertical-align让我更接近目标，但正如您所看到的，它仍未按预期正常工作。

这个小提琴可以在这里找到：https://jsfiddle.net/67dyxLr1/

<nav class="nav-primary">
  <ul class="menu">
    <li class="menu-item home"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Blog</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
    <li class="menu-item"><a href="#">About Us</a></li>
  </ul>
</nav>

这是我的CSS：

.nav-primary {
  background: #CCC;
}

.nav-primary li {
  list-style-type: none;
  display: inline-block;
  text-align: left;
  font-size: 26px;
  line-height: 0px;
}

.nav-primary a {
  display: inline-block;
  padding: 32px 20px;
  border: 1px dashed black; /* border only used for display purpose of alignment*/
  margin-right: -4px;
}

.nav-primary a:hover {
    background: #FFF;
}

.menu {
  width: 100%;
}

.menu-item {

}

.home a {
  font-size:0px;
}

.home a:after {
  font-family: "dashicons";
  content: " \f102";
  font-size: 40px;
  display: inline-block;
  vertical-align: middle;
  line-height: 0px;
}

Answer 1

只需将li添加到.nav-primary li { list-style-type: none; display: inline-block; text-align: left; font-size: 26px; line-height: 0px; vertical-align: middle; }

即可

<强> CSS

public List<Employee1> GetApplicant(int ApplicationID)
{
    var context = new FPSDB_newEntities();       
    var data = (from a in context.Applications
                join e in context.Employees on a.EmployeeID equals e.EmployeeID
                where
                (
                   a.ApplicationID == ApplicationID
                )
                select new Employee1
                {
                    EmployeeID = e.EmployeeID,
                    SecondEmail = e.SecondEmail,
                    EmailID = e.EmailID,
                    Title = e.Title,
                    Name = e.Name,
                    Rank = e.Rank,
                    POBox = e.POBox,
                    Phone = e.Phone,
                    JoinDate = e.JoinDate,
                    Status = e.Status,
                    DepartmentID = e.DepartmentID.Value,
                    NameString = e.NameString,
                    Department = e.Department,
                    ParentDept = e.ParentDept,
                    DepartmentAr = e.DepartmentAr,
                    NameAr = e.NameAr,
                    NameStringAr = e.NameStringAr,
                    TitleAr = e.TitleAr
                }).ToList();
    return data;
}

<强> DEMO HERE

Answer 2

您需要为li添加垂直对齐：

＆＃13;

<nav class="nav-primary">
  <ul class="menu">
    <li class="menu-item home"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Blog</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
    <li class="menu-item"><a href="#">About Us</a></li>
  </ul>
</nav>

＆＃13;

 $zip = new ZipArchive;
 $filePath = $fullPath.$_POST['name_input'].'.zip';
 $file = $zip->open($fullPath.$_POST['name_input'].'.zip', ZipArchive::CREATE);
 $txtInputs = '';
 foreach($_POST['inputs'] as $key => $input){
     $txtInputs.=  $key.': '.$input."";
 }
$zip->addFromString('name_file.txt',  $txtInputs);
$zip->close();



  //send email -> add attach $filePath

＆＃13;

垂直对齐包含图标

2 个答案: