Блог

Главная - Вопросы по программированию - Как оформить веб-страницу так, чтобы ссылка a href отображалась справа от абзаца

Как оформить веб-страницу так, чтобы ссылка a href отображалась справа от абзаца

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь сделать так, чтобы ссылка, созданная с помощью javascript, отображалась справа от абзаца, который также был создан с помощью javascript. Проблема в том, что ссылка отображается под абзацем, а text-align: center; и text-align: right; ничего не меняют. Пожалуйста, помогите, вот код:

Абзац:

 var p1 = document.createElement("P")
p1.className = "sideBar";
p1.id = "author"
p1.innerText = "By John Gruber";
document.body.appendChild(p1);

Ссылка:

 var a = document.createElement('a');
var linkText = document.createTextNode("Biden Will Make America Lead Again");
a.appendChild(linkText);
a.href = "https://www.wsj.com/articles/biden-will-make-america-lead-again-11603127677";
a.className = "center";
document.body.appendChild(a);

CSS:

 .sideBar {
    text-decoration: none;
    display: block;
    list-style: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 1em 0;
    padding: 0;
    font-size: 1em;
    letter-spacing: 2px;
    line-height: 1em;
    color: #eeeeee;
}

.center {
    text-decoration: none;
    font-family: "Gill Sans MT", "Gill Sans", "Gill Sans Std", Verdana, "Bitstream Vera Sans", sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1.05em;
    padding-top: 2px;
    padding-bottom: 0px;
    color: #ccc;
    text-align: right;
}

Ответ №1:

Для этого есть разные способы, например, использование символов с плавающей запятой, как упоминал Махмуд. Я настоятельно рекомендую изучить flexbox для позиционирования. Это значительно упростит ваше позиционирование. Также я вижу, что вы не использовали универсальный селектор для сброса (добавлен пример).Решение приведено ниже

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 .sideBar {
     text-decoration: none;
     display: block;
     list-style: none;
     letter-spacing: 2px;
     text-transform: uppercase;
     font-size: 1em;
     letter-spacing: 2px;
     line-height: 1em;
     color: #eeeeee;
 }
    
 .center {
     text-decoration: none;
     font-family: "Gill Sans MT", "Gill Sans", "Gill Sans Std", Verdana, "Bitstream Vera Sans", sans-serif;
     letter-spacing: .15em;
     text-transform: uppercase;
     font-weight: normal;
     font-size: 1.05em;
     padding-top: 2px;
     padding-bottom: 0px;
     color: #ccc;
     text-align: right;
 }

 .container {
     display: flex;
     justify-content: space-between;
 }

index.js

 var div1 = document.createElement("div");
div1.className = "container"
document.body.appendChild(div1);


var p1 = document.createElement("P")
p1.className = "sideBar";
p1.id = "author"
p1.innerText = "By John Gruber";
div1.appendChild(p1);

var a = document.createElement('a');
var linkText = document.createTextNode("Biden Will Make America Lead Again");
a.appendChild(linkText);
a.href = "https://www.wsj.com/articles/biden-will-make-america-lead-again-11603127677";
a.className = "center";
div1.appendChild(a)

Комментарии:

1. Я не знаю, что такое flexbox или universal selector, поскольку я довольно новичок в веб-разработке, но ваш код сработал, так что большое вам спасибо!

2. Да, у меня было предчувствие. Я действительно рекомендую изучить его. Вам понравится, насколько это упрощает вашу жизнь как разработчика. Универсальный селектор — это добавленный код *{}. это делает поля и отступы всех элементов равными 0. Проведите небольшое исследование по border-box. Хорошая концепция

Ответ №2:

Тег P (paragraph) является элементом уровня блока, он занимает всю ширину контейнера и всегда начинается с новой строки. вы можете указать display:inline для класса .sideBar .

 .sideBar {
text-decoration: none;
display: inline;
list-style: none;
letter-spacing: 2px;
text-transform: uppercase;
margin: 0 0 1em 0;
padding: 0;
font-size: 1em;
letter-spacing: 2px;
line-height: 1em;
color: #eeeeee;

}

Комментарии:

1. Я пробовал это, но это просто все испортило, не имея новых строк ни на чем. Я попытался применить ее к идентификатору только для абзаца, но затем абзац центрировался и не перемещался влево

Ответ №3:

добавьте float: right; inside .center и добавьте float: left; inside .sideBar

Ответ №4:

Это потому, что вы создаете .sidebar элемент уровня блока. (Также <p> по умолчанию используется элемент уровня блока)
Элементы уровня блоков по умолчанию перемещают содержимое в «следующую строку» и занимают все горизонтальное пространство.
Самый простой способ решить вашу проблему без серьезных изменений в JS — это создать .sidebar элемент inline-block . ( display: inline-block )

inline-block в вашем случае лучше, чем inline , потому что, если вы установите любой из этих параметров, ваши .sidebar и .center будут появляться один за другим, но только с inline-block вами можно указать a margin , который вступает в силу

Комментарии:

1. Я пробовал это, но все было беспорядочно из-за отсутствия интервалов между строками. Затем я попытался применить ее только к идентификатору в абзаце, который исправил его, кроме того, что абзац теперь центрирован, и я не могу заставить его переместиться в левую часть экрана.