текст выравнивается прямо в промежутке

Question

Я немного сомневаюсь, как я решаю это наилучшим образом. В сноске этой страницы: Portfolio, есть следующее:

04-11-2016: Дизайн В портфолио

05-11-2016: Hvad эр Mautic?

06-11-2016: Некоторый текст

Я хотел бы, что дата выровнен по правому краю, но только дата. Там я думал, что смогу установить его в промежутке? Я пытался с этим HTML, но это, конечно, не решение:

HTML

<div class="col-xs-12 col-sm-6 col-md-4"> 
       <div class="footeritem"> 
        <h4>Nyheder</h4> 
        <ul class="popular-posts"> 
         <li> 
          <a href="#" target="_blank"> 

           Design In Portfolio&emsp;&emsp;<span class="newsDate">06-11-2016</span> 
          </a> 
         </li> 
         <li> 
          <a href="#" target="_blank"> 
           Hvad er Mautic? &emsp;&emsp;&emsp;<span class="newsDate">06-11-2016</span> 

          </a> 
         </li> 
         <li> 
          <a href="#" target="_blank"> 
           Some text&emsp;&emsp;&emsp;<span class="newsDate">06-11-2016</span> 

          </a> 
         </li> 
        </ul> 
       </div> 
      </div> 

CSS

.newsDate { 
    font-weight: 100; 
    text-align: right; 
} 

Answer 1

Его содержали внутри блочного элемента, так что добавьте «Float: право «к тем промежуткам, чтобы получить правильное выравнивание =).

Редактировать. Кто-то сбил идею float в теперь удаленном комментарии. Плавающий действительно представляет собой уродство макета, когда ваш текст слева становится слишком большим. Вместо этого вы можете использовать причудливое гибкое решение, которое будет немного улучшаться в разных контекстах.

Для гибки установите привязку в положение «display: flex» и диапазон «flex: 1; text-align: right; white-space: nowrap;».

Answer 2

1. Поместите свой срок вне связи
2. Убедитесь, что литий находится в блоке индикации (или встроенный блок с заданной шириной)
3. поплавка права вашего диапазон

CSS

span { float: right; } 

HTML

<li> 
     <a href="#" target="_blank"> 
      Hvad er Mautic? &emsp;&emsp;&emsp; 
     </a> 
     <span class="newsDate">06-11-2016</span> 
    </li> 

Answer 3

Вы можете попробовать это: -

float:right;