Question

CSS display:适用于text元素，但对<i>元素则不做任何事情。我可以使用float: right来移动它，这是我需要将它放在div上的地方，但是填充已关闭并且需要处理！任何反馈将不胜感激:) 我的部分代码如下：

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://use.fontawesome.com/37471687aa.js"></script>
  </head>
  <body>
    <section class="container">
      <nav>
        <div class="arrow-left">
          <i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
        </div>
      </nav>
      <section class="restaurant-list">
        <div class="location">
          <div class="content">
            <h1>Bakalaki Greek Taverna</h1>
            <h3>Seng Poh Road 3, Singapore</h3>
          </div>
          <div class="arrow">
            <i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
          </div>
        </div>
      </section>
    </section>
  </body>
</html>

CSS：

body {
  background-color: #333;
  font-family: sans-serif;
  font-size: 10px;
}

.container {
  margin: 0 auto;
  width: 420px;
}

nav {
  box-sizing: border-box;
  background-color: #000;
  padding: 10px 0 15px 15px;
  width: 100%;
}

.restaurant-list {
  margin: 0 auto;
  width: 100%;
}

.location {
  box-sizing: border-box;
  background-color: #aaa;
  border: .02px  solid #333;
  margin: 0%;
  padding: 10px 10px 0 10px;
  width: 100%;
  float: left;
}

.location:hover {
  background-color: #888;
}

.content {
 display:block;
}

.content h1 {
  font-size: 18px;
  font-weight: bolder;

}

.content h3 {
  font-size: 12px;
  padding-top: 5px;
}

.arrow  {
display: inline-block;
}

当我在元素箭头上使用display: inline-block时，我觉得这里缺少一些细节。我知道.arrow可以工作，因为float: right;可以工作。我不知道我在这里想念的是什么。我需要将文本放在div的左侧，并在右侧的箭头。

Answer 1

能否请您尝试以下代码？我添加的是：

在CSS类float: left;中添加.content；
在CSS类float: right;中添加.arrow；

body {
  background-color: #333;
  font-family: sans-serif;
  font-size: 10px;
}

.container {
  margin: 0 auto;
  width: 420px;
}

nav {
  box-sizing: border-box;
  background-color: #000;
  padding: 10px 0 15px 15px;
  width: 100%;
}

.restaurant-list {
  margin: 0 auto;
  width: 100%;
}

.location {
  box-sizing: border-box;
  background-color: #aaa;
  border: .02px  solid #333;
  margin: 0%;
  padding: 10px 10px 0 10px;
  width: 100%;
  float: left;
}

.location:hover {
  background-color: #888;
}

.content {
 float: left;
 display:block;
}

.content h1 {
  font-size: 18px;
  font-weight: bolder;

}

.content h3 {
  font-size: 12px;
  padding-top: 5px;
}

.arrow  {
  float: right;
  display: inline-block;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://use.fontawesome.com/37471687aa.js"></script>
  </head>
  <body>
    <section class="container">
      <nav>
        <div class="arrow-left">
          <i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
        </div>
      </nav>
      <section class="restaurant-list">
        <div class="location">
          <div class="content">
            <h1>Bakalaki Greek Taverna</h1>
            <h3>Seng Poh Road 3, Singapore</h3>
          </div>
          <div class="arrow">
            <i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
          </div>
        </div>
      </section>
    </section>
  </body>
</html>

Answer 2

如果我对您的理解正确，这将解决您的问题：

CSS：

.location {
  box-sizing: border-box;
  background-color: #aaa;
  border: .02px  solid #333;
  margin: 0%;
  padding: 10px 10px 0 10px;
  width: 100%;
  /* You can solve the problem with Display flex. */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

如何在div的同一行中同时对齐内容和箭头？

2 个答案: