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;
}
Mahmoudが述べたようにフロートを使用するなど、これを実現するさまざまな方法があります。ポジショニングのために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)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加