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

这种编码方式有点难以对齐。我会重写你的代码。但是，我建议你使用像bootstrap或zurb这样的CSS框架。

首先，您需要重写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/

中的所有代码

Answer 2

首先，<ul>中应该包含的唯一元素是<li>。 <div>（或链接或其他任何内容）可能会让您感到悲伤。

然而，真正的问题是你在错误的元素上使用了错误的CSS属性。你想要vertical-align（不是“对齐”），它应该应用于列表项（而不是容器）。

试试这个：

<ul>
  <li class="nav-link"><!-- img here --></li>
  <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>

与

.nav-link { vertical-align: middle; }

Answer 3

实现目标的最简单方法是简单地浮动图标，如下面的css和this pen中所示。

    #nav {
      border: 1px solid red;
      height:100px;
      line-height:1;
      display:inline-block;
    }
    .nav-icon {
        display: inline-block;
        border: 1px solid red;
        float:left;
     }

浮动强制其他元素围绕浮动元素流动。你只是想要对浮动设备保持警惕，因为如果你没有警惕（它们会折叠它们的父容器），它们会对你的布局造成严重破坏。您可以阅读所有相关信息here。

Answer 4

我不是UI专家。但通过查看以下标签，我可以问你几个问题需要理解吗？因为您在ul中编写非li标签。尝试用li标签包裹您的代码。只需转到w3cshool链接。

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu

http://www.w3schools.com/html/html_lists.asp

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

Answer 5

如何简单地移动li元素呢？

.nav-link { 
    position: relative; 
    bottom: 20px;
}

为什么ul与底部对齐

5 个答案: