Question

我想将“社交媒体”一词移到两个图标上方作为标题。我遇到的问题是在不移动图标和书本按钮的情况下移动标题。

能请你帮忙吗？

.icons{
  font-size: 50px;
  color: blue;
  padding-top: 250px;
  padding-left: 110px;
}
.book {
  padding-left: 43.5%;
}
.book button {
  background-color: #F6B2A2; 
  border: none;
  color: black;
  text-decoration: none;
  font-size: 16px;
  height: 50px;
  width: 100px;
}
.book a {
  color: black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="socialm">
    <h2>Social Media</h2>
</div>
<div class="icons">
        <a href="page2.php"><i class="fab fa-facebook-square"></i></a>
        <a href="page2.php"><i class="fab fa-instagram"></i></a>
</div>
<div class="book">
    <a href="page2.php"><button>Book</button></a>
</div>

Answer 1

您可以在CSS中为图标添加display: block和display: inline-block：

.socialm {
  display: block;
}

.icons{
  display: inline-block;
  font-size: 50px;
  color: blue;
  padding-top: 250px;
  padding-left: 110px;
}

.book {
  display: block;
  padding-left: 43.5%;
}

.book button {
  background-color: #F6B2A2; 
  border: none;
  color: black;
  text-decoration: none;
  font-size: 16px;
  height: 50px;
  width: 100px;
}

.book a {
  color: black;
}

Answer 2

添加另一个同时包裹标头标记和图标的div。将填充物添加到该div中，以将两块放置在一起并同时移动它们。

.top{
  padding-left: 43.5%;
}

.icons{
  font-size: 50px;
  color: blue;
  padding-top: 250px;
  
}
.book {
  padding-left: 43.5%;
}
.book button {
  background-color: #F6B2A2; 
  border: none;
  color: black;
  text-decoration: none;
  font-size: 16px;
  height: 50px;
  width: 100px;
}
.book a {
  color: black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<div class="top">
  <div class="socialm">
    <h2>Social Media</h2>
  </div>
  <div class="icons">
    <a href="page2.php"><i class="fab fa-facebook-square"></i></a>
    <a href="page2.php"><i class="fab fa-instagram"></i></a>
  </div>
</div>
<div class="book">
  <a href="page2.php"><button>Book</button></a>
</div>

如何在不移动其他所有内容的情况下移动文本？

2 个答案: