Почему 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

Во-первых, только элементы, которые должны быть внутри <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 2

Самый простой способ сделать то, что вы хотите, чтобы просто плавать значок, как показано на рисунке 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 3

Я не эксперт по пользовательскому интерфейсу. Но взглянув на следующий тег, я могу задать вам несколько вопросов для понимания? Потому что вы пишете теги non-li внутри ul. Попробуйте ti обернуть ваш код тегом 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 4

Таким образом, что вы кодирования немного сложно align.I будет переписать код. Однако я рекомендую использовать 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; 
} 

вам нужно удалить #nav также в вашем CSS-код.

на основе ваших потребностей, вы можете изменить этот класс

.nagivation #nav{ 

// add needed adjustment 
} 

вы можете иметь доступ ко всем кодам здесь https://jsfiddle.net/mhadaily/7f152z3r/

Answer 5

насчет просто перемещая li элементы вверх немного?

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