Text-Align CSS не работает

Question

У меня есть ссылки бар в верхней части моей страницы с тремя звеньями: Learn, Партнерских Содержимого, а затем ссылки на профиль, соединенную с выпадающим меню. Я хочу, чтобы ссылка профиля была справа, а две другие - слева.

#top-links-bar{padding:30px;border:0px solid black;background: linear-gradient(gray, white);} 
 

 
.caret{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid black;display:inline-block; 
 
margin-top:5px;vertical-align:middle;transition:all 2s;} 
 

 
.caret:hover{border-top:5px solid green; cursor:pointer} 
 

 
.top-link{font-family:romeral; color:#1851EE; padding:30px; transition:color 2s, background 2s;} 
 

 
.top-link:hover{color:gray;background:linear-gradient(white, gray);cursor:pointer;border-left:1px solid black;border-right:1px solid black;} 
 

 
.dropdown{font-family:champagnelimo; background:linear-gradient(gray, green); z-index:200; height:150px; width:100%; padding:50px; border:4px solid gray; position:absolute; top:100px;} 
 
    
 
.dropdown2{ 
 
border:3px solid grey; background:linear-gradient(to left, #37B732, orange); width:20%; position:relative; left:10%;} 
 

 
.operation-your-profile{text-align:center; padding:20px; border-top:1px solid gray; border-bottom:1px solid gray;display:block;} 
 
css

<div id="top-links-bar"> 
 

 
<span class="top-link link-bar-link" id="learn">Learn <span class="caret"></span></span> 
 

 
<span class="top-link link-bar-link" id="affiliate-content">Affiliate Content <span class="caret"></span></span> 
 

 
<span class="top-link link-bar-link" id="account-profile" style="text-align:right;"><?php echo $_POST["name"];?> <span class="caret"></span></span> 
 

 

 
</div> 
 
<div id="affiliate-content-dropdown" class="dropdown"> 
 
<p style="font-size:20pt;"><b>Tutorial Content</b></p> 
 
<ul style="list-style-type:square; font-size:15pt;"> 
 
<li><a href="http://othersite.com" target="_blank">OtherSite.com</a></li> 
 

 
</div> 
 

 
<div id="your-profile-dropdown" class="dropdown2"> 
 
    <span class="operation-your-profile">My Profile</span> 
 
    <span class="operation-your-profile">Log Out</span> 
 
</div>

Самая большая проблема заключается в том, что нет ничего в CSS, что противоречит атрибут стиля! И даже если бы это было, правильное правило было бы приоритетом.
Спасибо заранее.

Answer 1

создать 3 CSS классы:

float-left { float: left;} 
float-right {float: right;} 
clear-float {clear: both;} 

, то вы можете попробовать

<span class="top-link link-bar-link float-left" id="learn">Learn <span class="caret"></span></span> 

<span class="top-link link-bar-link float-left" id="affiliate-content" >Affiliate Content <span class="caret"></span></span> 

<span class="top-link link-bar-link float-right" id="account-profile">trest <span class="caret"></span></span> 

<div class="clear-float"></div> 

Вы также можете попробовать что-то более семантический, как это:

CSS:

.caret{ 
    border-left:5px solid transparent; 
    border-right:5px solid transparent; 
    border-top:5px solid black; 
    display:inline-block; 
    margin-top:5px; 
    vertical-align:middle; 
    transition:all 2s; 
    margin-left:4px; 

} 


#top-links-bar{ 
    padding:5px; 
    border:0px solid black; 
    background: linear-gradient(gray, white); 
} 
#top-links-bar ul{ 
    display: block; 
    list-style : none; 
    padding: 0; 
    margin: 0; 
} 
#top-links-bar ul li a{ 
    display: block; 
    float: left; 
    padding: 17px 17px; 
    position: relative; 
} 
#top-links-bar ul li a:hover{ 
    color:gray; 
    background:linear-gradient(white, gray); 
    cursor:pointer; 
    border-left:1px solid black; 
    border-right:1px solid black; 
    padding: 17px 16px; 
} 
#top-links-bar ul li:last-child { 
    float:right; 
} 

HTML меню

<div id="top-links-bar"> 
    <ul> 
     <li><a href="#">Learn<span class="caret"></span></a></li> 
     <li><a href="#">Affiliate Content<span class="caret"></span></a</li> 
     <li><a href="#"><?php echo $_POST["name"];?><span class="caret"></span></a></li> 
    </ul> 
    <div style="clear:both"></div> 


</div> 

Answer 2

Текстовый выравнивание применяется к тексту внутри, он не выравнивает диапазон или контейнер, к которому он применяется.

Элемент, который вы хотите разместить, должен либо использовать позицию, либо поплавок, чтобы попасть туда.

position: absolute; right:0; top:0; 

Или ...

float:right; 

Answer 3

Вот обновленный скрипку, который очищает код немного, так что для чтения и исправляет несколько вещей: http://jsfiddle.net/crmLh63b/2/

Во-первых, вы не должны» t действительно имеют пролеты внутри пролетов. В них не должно быть никакого другого контейнера, поэтому я изменил их на div. Затем, если мы плаваем области содержимого, они сидят намного лучше, чем абсолютно позиционировать (хотя не стесняйтесь изменять это, основываясь на том, как работают ваши выпадающие меню с jQuery).

У вас также был незакрытый <ul>.

Затем, если мы поместим ваш первый элемент заголовка влево и поплаваем третий элемент путем таргетинга на идентификатор #account-profile, мы можем плавать вправо, чтобы дать вам желаемый аффект. Обновленный код ниже:

HTML:

<div id="top-links-bar"> 
    <div class="top-link link-bar-link" id="learn"> 
     Learn <span class="caret"></span> 
    </div> 

    <div class="top-link link-bar-link" id="affiliate-content"> 
     Affiliate Content <span class="caret"></span> 
    </div> 

    <div class="top-link link-bar-link" id="account-profile"> 
     <?php echo $_POST["name"];?> <span class="caret"></span> 
    </div> 
</div> 

<div id="affiliate-content-dropdown" class="dropdown"> 
    <p style="font-size:20pt;"><b>Tutorial Content</b></p> 
    <ul style="list-style-type:square; font-size:15pt;"> 
     <li><a href="#" target="_blank">OtherSite.com</a></li> 
    </ul> 
</div> 

<div id="your-profile-dropdown" class="dropdown2"> 
    <span class="operation-your-profile">My Profile</span> 
    <span class="operation-your-profile">Log Out</span> 
</div> 

CSS:

#top-links-bar { 
     float: left; 
     width: 100%; 
     padding:30px; 
     background: linear-gradient(gray, white); 
} 
.caret { 
     border-left:5px solid transparent; 
     border-right:5px solid transparent; 
     border-top:5px solid black; 
     display:inline-block; 
     margin-top:5px; 
     vertical-align:middle; 
     transition:all 2s; 
} 
.caret:hover { 
     border-top:5px solid green; 
     cursor:pointer 
} 
.top-link { 
     float: left; 
     font-family:romeral; 
     color:#1851EE; 
     padding:30px; 
     transition:color 2s, 
     background 2s; 
} 
#account-profile.top-link { 
     float: right; 
} 
.top-link:hover { 
     color:gray; 
     background:linear-gradient(white, gray); 
     cursor:pointer; 
     border-left:1px solid black; 
     border-right:1px solid black; 
} 
.dropdown { 
    float: left; 
    font-family:champagnelimo; 
    background:linear-gradient(gray, green); 
    z-index:200; 
    height:150px; 
    width:100%; 
    padding:50px; 
    border:4px solid gray; 
} 
ul li:visited { 
    color:blue; 
} 
.dropdown2 { 
    float: left; 
    margin-left: 10%; 
    border:3px solid grey; 
    background:linear-gradient(to left, #37B732, orange); 
    width:20%; 
    position:relative; 
} 
.operation-your-profile{ 
    text-align:center; 
    padding:20px; 
    border-top:1px solid gray; 
    border-bottom:1px solid gray; 
    display:block; 
} 

Существует, вероятно, еще много очистки, чтобы сделать, чтобы сделать его четким, как вы можете, но это должно быть хорошей отправной точкой.