Почему при использование margin-right двигаются от друг друга все слова. HTML, CSS

Question

Я начинающий в css, html, php, js. Решил сделать сайт, раньше был опыт, около 4 лет назад, сейчас все позабыл.

Я хочу что бы от правого края у меня отодвинулись слов. Проблема заключается в том что когда я использую margin-right: 100x; То у меня не только слова отодвигаются от правого края, но и сами слова от себя.

Вот скрины: margin-right:30px

А вот если с margin-right:100px

Вот код html:

<div class="text-options">
        <li><a href="#" class="jopo">Язык ▼</a></li>
        <li><a href="#">Профиль ▼</a></li>
    </div>

А вот код css:

.text-options li{
display: inline-block;
float: right;
margin-right:30px;
list-style: none;
padding: 20px;}

.text-options li a{
color: #FFF;
text-decoration: none;}

В чем может быть причина? Или margin-right за что то другое отвечает? Нужна ваша помощ!

Answer 1

Проблема в том, что вы задаете margin-right всем элементам вашего списка, чтобы добавить отступ только для одного, нужно задавать именно для него (мб слегка запутанно, сам только начинаю)

 <style>
    .text-options li{
        display: inline-block;
        float: right;
        list-style: none;
        padding: 20px;
    }

    .text-options li a{
        color: #FFF;
        text-decoration: none;
    }

    .first{
        margin-right:30px;
    }
</style>

<div class="text-options">
    <li class="first"><a href="#" class="jopo">Язык ▼</a></li>
    <li><a href="#">Профиль ▼</a></li>
</div>

Сделал так, вроде работает :D

Answer 2

Очень кратко:

В данном случае лучше использовать отступ margin-left от каждого левого края элемента списка. Общий же отступ padding применить родительскому элементу от его внутренних краев.
Позиционировать элементы можно с помощью Flex. Если у вас уже был опыт работы с html и css, то вам не сложно будет ее понять. Эта технология на самом деле очень проста.
Изображение треугольников лучше выводить с помощью псевдоэлемента. Не стоит их заворачивать в тег <a>.
В HTML все элементы списка <li> нужно заключать в тег <ul>.

Примерно такой должна быть ваша правильная верстка:

body {
  margin: 0;
  padding: 0;
  background: #383838;
}

.text-options {
  padding: 25px 50px;
  background: #242424;
  border-bottom: 2px solid #fff;
}

.text-options ul {
  display: flex;
  flex-flow: row-reverse nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 18px;
  color: #fff;
}

.text-options li {
  margin-left: 50px;
}

.text-options li:after {
  content: "▼";
  padding-left: 5px;
}

.text-options a {
  color: #fff;
  text-decoration: none;
}

<div class="text-options">
  <ul>
    <li><a href="#" class="jopo">Язык</a></li>
    <li><a href="#">Профиль</a></li>
  </ul>
</div>

БЛОГ НА HUSL

Почему при использование margin-right двигаются от друг друга все слова. HTML, CSS

Ответы (2 шт):