css - 为什么ul对齐到底部

Question

一个多小时以来，我一直在认真地处理这件事。基本上我有一个导航栏，最左边有一个图标，链接与图像底部对齐。

我试过弄乱填充、边距、行高、垂直对齐以及我能想到的所有其他内容。我还尝试在 ul 内部和之前放置图像。我需要将 ul 元素(将是链接)垂直对齐到图标的中心。

我已将所有代码放入一个文件中，并将其复制到此处。此外，当您发帖时，请解释为什么解决方案会起作用，而不仅仅是发布代码。我在此处发布之前搜索过的其他帖子没有解释任何内容，只是包含在我尝试时无济于事的代码。不幸的是，因为我不知道解决方案是什么或它与什么相关，所以我包含了所有代码。

body {
  margin: 0;
  /*background-color: #10f009;*/
  font-size: 62.5%;
  font-family: sans-serif;
}
img {
  margin: 0 0 0 0;
  max-width: 100%;
  height: 50%;
}
.smallSection {
  margin: 100px;
}
.paragraph {
  font-size: 2em;
  max-width: 500px;
}
.title {
  font-size: 2.4em;
}
.list {
  list-style: solid inside url("");
  font-size: 2em;
}
.nav-link {
  list-style-type: none;
  display: inline-block;
  text-align: center;
  font-size: 2em;
  width: 200px;
  border: 1px solid red;
}
.nav-icon {
  display: inline-block;
  border: 1px solid red;
}
.largeSection {} #section1 {
  background-image: url("../img/placeholder.jpg")
}
#nav {
  border: 1px solid red;
  margin: 0;
  padding: 0;
  align: top;
  height: 100px;
  line-height: 1;
}
/*temporary*/

div {
  border: 1px solid red;
}

<!-- Dawn Little -->
<div id="section1" class="largeSection">
  <!-- Navigation -->
  <div>
    <ul id="nav">
      <div style="width:70px;height:70px;border: 1px solid red;display: inline-block;">
        <!-- The img link is obviously broken so this is here instead. -->
      </div>
      <!-- <img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"> -->
      <li class="nav-link">Who am I</li>
      <li class="nav-link">What I do</li>
      <li class="nav-link">3-Day Trial</li>
      <li class="nav-link">Challenges</li>
      <li class="nav-link">Become a Coach</li>
    </ul>
  </div>
  <div class="smallSection">
    <p class="paragraph">
      <span class="title">Client Name<br /></span> Hi, I'm a wife, mother, and Personal Wellness Coach with Herbalife Nutrition. My super power - I change lives.
    </p>
  </div>
</div>
<!-- What I do -->
<div id="section2" class="largeSection">
  <div class="smallSection">
    <p class="paragraph">
      <span class="title">What I do</span>
      <ul class="list">
        <li>Wellness Evaluations</li>
        <li>Nutrition Coaching</li>
        <li>Impact Lifestyle</li>
        <li>Get Results</li>
        <li>Coach Coaches</li>
      </ul>
    </p>
  </div>
</div>
<!-- 3-day trial -->
<div id="section3" class="largeSection">
  <div class="smallSection">
    <p class="title">
      Try Our 3-Day Trial
    </p>
    <p class="title">
      What you get:
    </p>
    <ul class="list">
      <li>Personal Wellness Coach</li>
      <li>Wellness Evaluation</li>
      <li>Meal Plan</li>
      <li>Daily Support</li>
      <li>Plan of Action</li>
      <li>6 Meals</li>
      <li>Metabolism Booster</li>
    </ul>
  </div>
</div>
<!-- Challenges -->
<div id="section4" class="largeSection">
  <div class="smallSection">
    <p class="title">
      Join a Weight Loss Challenge
    </p>
    <p class="title">What you get:</p>
    <ul class="list">
      <li>Personal Wellness Evaluation</li>
      <li>Personalized Program</li>
      <li>Nutrition Classes</li>
      <li>ommunity of Support</li>
      <li>Accountability</li>
      <li>Opportunity to Win Cash &amp Prizes</li>
    </ul>
  </div>
</div>
<!-- Become a coach -->
<div id="section5" class="largeSection">
  <div class="smallSection">
    <p class="title">
      Become a Coach
    </p>
    <p class="title">
      What you get:
    </p>
    <ul class="list">
      <li>Opportunity to Change Lives</li>
      <li>Opportunity for Personal &amp Financial Growth</li>
      <li>Training</li>
      <li>Potential to Change Lives in Over 90 Countries</li>
      <li>Be Part of a Team</li>
      <li>Get in the Best Shape You've Ever Been</li>
    </ul>
  </div>
</div>

Answer 1

这种编码方式很难对齐。我将重写您的代码。但是，我建议您使用 CSS 框架，例如 bootstrap 或 zurb。

首先，您需要重写 HTML 部分，例如

 <!-- Navigation -->
    <div class="header clearfix">
     <div class="logo">
          <!-- The img link is obviously broken so this is here instead. -->
     </div>
     <div class="nagivation">
      <ul id="nav">
        <li class="nav-link">Who am I</li>
        <li class="nav-link">What I do </li>
        <li class="nav-link">3-Day Trial</li>
        <li class="nav-link">Challenges</li>
        <li class="nav-link">Become a Coach</li>
      </ul>
        </div>
    </div>

我添加了header和nagivation然后将这些行添加到您的 css 到

  .clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.header{
  min-height:70px;
  clear:both
}
.logo{
  width:20%;
  float:left;
}
.nagivation{
  width:80%;
  float:right;
}

您还需要删除 CSS 代码中的 #nav。

根据你的需要，你可以改变这个类

.nagivation #nav{

// add needed adjustment  
}

您可以在这里访问所有代码 https://jsfiddle.net/mhadaily/7f152z3r/