文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在div上对齐内容和箭头？

问如何在div上对齐内容和箭头？
EN

Stack Overflow用户

提问于 2020-04-30 00:49:22

回答 2查看 610关注 0票数 0

CSS display:适用于文本元素，但它没有为<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的左边，箭头在右边。

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-30 01:11:05

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

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;
}

票数 0

Stack Overflow用户

发布于 2020-04-30 01:08:26

你能试试下面的密码吗？我补充的是：

css类.content;

Add .arrow;

中的css类

添加float: left;

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61514122

复制

相似问题

问如何在div上对齐内容和箭头？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div上对齐内容和箭头？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div上对齐内容和箭头？
EN