Aligning text right in a list

Navigation
4

I'm trying to make a change to a code I have and what seemed relatively easy to me became a difficulty, what I have is this: 

<div class="top-bar">
  <div class="container">
    <div class="row">
      <div class="col-md-6"> <img id="brand-image" alt="ANC Estofados" src="images/anc.png"> </div>
      <div class="col-md-6">
        <ul class="contact-details">
          <li><a href="#"><i class="icon-phone"></i> +51 44 3233-3780</a></li>
          <li><a href="#"><i class="icon-mail-2"></i> [email protected]</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

The text that I need to align to the right are those within div top-bar where I have placed a ul top-bar .

The css I have is this: 

.top-bar .contact-details li {
    display: inline-block;  
}

.top-bar .contact-details li a:before {
    position: relative;
    content: "|";
    font-size: 18px;
    margin: 0 3px;
    top: -1px;
    color: #ddd;
}

.top-bar .contact-details li a:before {
    color: #aaa;
}

.top-bar .contact-details li:first-child a:before {
    display: none;
}

.top-bar .contact-details li a {
    font-size: 18px;
    display: block;
    line-height: 68px;
    text-align: right;
}

What I tried to do was to align the text to the right with text-align: right; in the code above, but had no effect when it was published.

If you prefer to take a look at the project, the link is this: Site

    
asked by anonymous 19.01.2016 / 20:46

3 answers

2

Your problem is not the alignment of the text itself, but the positioning of the element li within ul .

Apply the following code to element ul : 

text-align: right;

So: 

.top-bar ul {
    text-align: right;
};

Note: You do not need to use float, which can mess up your code.

    
19.01.2016 / 20:54
3

The point is to use right alignment in an inline-block element. Try using float right; 

.top-bar .contact-details li {
    display: block;
    float: right;
    margin-right: 10px;
}
    
19.01.2016 / 20:53
1

In this way, the order of the menu items will reverse. I propose a small change to your proposal (apply "lu" instead of "li")

.top-bar .contact-details ul {     display: block;     float: right;     margin-right: 10px; }

    
07.09.2017 / 16:31
Database with php Error inserting data into the database