如何将项目左对齐（标题）-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

491585

文章

251883395

访问

+关注

分类

暂无分类

日期归档

暂无数据

如何将项目左对齐（标题）

发布于2023-12-26 22:17 阅读(1337) 评论(0) 点赞(3) 收藏(3)

我试图将一些项目向左对齐，但我不知道我做错了什么。我正在制作youtube标题，此时，我已经完成了这个

我必须使用简单的填充将前两个项目向右对齐，但是当涉及到标题的左侧时，没有任何效果。我使用了对齐项目，但它们不移动。

这是我的html代码：

header {
  width: 100%;
  padding: 0px;
  /*FLEX*/
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #000;
}

header .youtube nav a span {
  color: red;
  padding: 5px;
  line-height: 50px;
}

header .menu nav a span {
  padding: 30px;
  line-height: 50px;
}

header .bloque nav a span {
  line-height: 50px;
  align-items: flex-end;
}

header .bloque nav img {
  line-height: 50px;
  align-items: flex-end;
  width: 50;
}

<header>
  <div class="menu">

    <nav>
      <a href="#"><span class="icon-menu"></span></a>
    </nav>
  </div>
  <div class="youtube">
    <nav>
      <a href="#"><span class="icon-youtube"></span>YouTube</a>
    </nav>
  </div>
  <form>
    <fieldset>
      <input type="search" placeholder="Search">
      <button type="submit">
							<span class="icon-magnifying-glass"></span>
						</button>
    </fieldset>
  </form>
  <div class="bloque">
    <nav>
      <a href="#"><span class="icon-camera"></span></a>
      <a href="#"><span class="icon-grid"></span></a>
      <a href="#"><span class="icon-forward"></span></a>
      <a href="#"><span class="icon-globe"></span></a>
      <img src="guía.png" width="100">
    </nav>
    <div/>
</header>

展开片段

当我使用justify-content:Space-round时，项目按照我想要的方式放置，但它们之间的间距不正确。但由于一些奇怪的原因，当我使用align-item:flex-end时，它们的排列方式如图相关。我该如何解决这个问题？有什么建议吗？

解决方案

要对齐标签内的项目，header您需要添加justify-content: flex-end;到标题以阅读有关它的更多信息检查此网站

header {
  width: 100%;
  padding: 0px;
  /*FLEX*/
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  /* justify-content: flex-end;*/  /*uncomment to align left*/
  align-items: center; /* to vertical align items */
  border-bottom: 1px solid #000;
}

header .youtube nav a span {
  color: red;
  padding: 5px;
  line-height: 50px;
}

/* header .menu nav a span {
  padding: 30px;
  line-height: 50px;
} */

header .bloque nav a span {
  line-height: 50px;
  align-items: flex-end;
}

header .bloque nav img {
  line-height: 50px;
  align-items: flex-end;
  width: 50;
}

<header>
  <div class="menu">

    <nav>
      <a href="#"><span class="icon-menu"></span></a>
    </nav>
  </div>
  <div class="youtube">
    <nav>
      <a href="#"><span class="icon-youtube"></span>YouTube</a>
    </nav>
  </div>
  <form>
    <fieldset>
      <input type="search" placeholder="Search">
      <button type="submit">
							<span class="icon-magnifying-glass"></span>
						</button>
    </fieldset>
  </form>
  <div class="bloque">
    <nav>
      <a href="#"><span class="icon-camera"></span></a>
      <a href="#"><span class="icon-grid"></span></a>
      <a href="#"><span class="icon-forward"></span></a>
      <a href="#"><span class="icon-globe"></span></a>
      <img src="guía.png" width="100">
    </nav>
    <div/>
</header>