Можно ли сделать так, чтобы элементы в элементе div были разнесены на определенную сумму c?

Question

Это кажется довольно простым, но я не уверен, как подойти к этому. У меня в шапке 4 ссылки и слева go. У меня есть другой div, в котором все эти ссылки называются main-header-right. Есть ли способ, не добавляя классы ко всем ссылкам, немного расставить эти ссылки?

.main-header {
    width: 100%;
    padding: 1% 1% 0%;
}

.logo {
    padding-left: 1%;
    font-size: 30px;
}

.main-header-right {
    float: right;
    font-size: 20px;
}

<div class="main-header">
        <a href="index.html" class="logo"><b>Fallen</b></a>
        <div class="main-header-right">
            <a href="#">About Me</a>
            <a href="#">Portfolio</a>
            <a href="#">Prices</a>
            <a href="#">Contact Us</a>
        </div>
</div>

Answer 1

путем добавления поля слева для бывшего

.main-header-right a {
    margin-left: 24px;
}

.main-header {
    width: 100%;
    padding: 1% 1% 0%;
}

.logo {
    padding-left: 1%;
    font-size: 30px;
}

.main-header-right {
    float: right;
    font-size: 20px;
}

.main-header-right a {
    margin-left: 24px;
}

<div class="main-header">
            <a href="index.html" class="logo"><b>Fallen</b></a>
            <div class="main-header-right">
                <a href="#">About Me</a>
                <a href="#">Portfolio</a>
                <a href="#">Prices</a>
                <a href="#">Contact Us</a>
            </div>
    </div>

Answer 2

Вы можете добавить его, применив стиль ко всем дочерним якорям .main-header-right

.main-header-right > a{
  margin: 0 5px;
}

Ниже приведен рабочий код:

.main-header {
    width: 100%;
    padding: 1% 1% 0%;
}

.logo {
    padding-left: 1%;
    font-size: 30px;
}

.main-header-right {
    float: right;
    font-size: 20px;
}

.main-header-right > a{
  margin: 0 5px;
}

<div class="main-header">
            <a href="index.html" class="logo"><b>Fallen</b></a>
            <div class="main-header-right">
                <a href="#">About Me</a>
                <a href="#">Portfolio</a>
                <a href="#">Prices</a>
                <a href="#">Contact Us</a>
            </div>
    </div>

Чтобы узнать больше о CSS Комбинаторах: W3Schools Css Комбинаторы

Answer 3

Вы можете использовать дочерний селектор, например .main-header-right a.

.main-header {
    width: 100%;
    padding: 1% 1% 0%;
}

.logo {
    padding-left: 1%;
    font-size: 30px;
}

.main-header-right {
    float: right;
    font-size: 20px;
}

.main-header-right a{
    padding: 0 20px;

}

<div class="main-header">
        <a href="index.html" class="logo"><b>Fallen</b></a>
        <div class="main-header-right">
            <a href="#">About Me</a>
            <a href="#">Portfolio</a>
            <a href="#">Prices</a>
            <a href="#">Contact Us</a>
        </div>
</div>

Редактировать: Я использовал padding. Другие ответы, которые пришли, пока я писал свой ответ, используют margin. Разница в том, что padding также увеличивает «ссылку» на ссылку, а margin - нет.