我一直在认真地弄乱这一件事一个多小时了。基本上我有一个导航栏，最左边有一个图标，链接对齐到图像的底部。
我曾尝试弄乱填充，边距，线高，垂直对齐以及我能想到的其他所有内容。我也尝试过在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 & 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 & 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>
答案 0 :(得分：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
}
答案 1 :(得分：0)
首先，<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; }
答案 2 :(得分：0)
实现目标的最简单方法是简单地浮动图标，如下面的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。
答案 3 :(得分：0)
我不是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>
答案 4 :(得分：0)
如何简单地移动li元素呢？
.nav-link {
position: relative;
bottom: 20px;
}