我正在尝试在CSS中使用text-align: right
,但出于某种原因无法移动它。我希望网站标题左对齐,图标右对齐在同一行。这是我的尝试:
HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="top-container">
<h2>Website Title</h2>
<i class="fas fa-bars"></i>
</div>
CSS
body {
margin: 0;
}
.top-container {
padding: 20px;
margin: 0;
width: 100%;
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0.75);
font-size: 2em;
font-weight: bold;
}
.top-container i {
color: red;
display: inline-block;
text-align: right;
}
.top-container h2 {
display: inline-block;
}
h2 {
margin-top: 10px;
}
<div class="top-container" style=" text-align: right;>
中。 - Rogério Dec