程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

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


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

如何将项目左对齐(标题)

发布于2023-12-26 22:17     阅读(1121)     评论(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>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/533306/deedc49caaec63631c8c/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

3 0
收藏该文
已收藏

评论内容:(最多支持255个字符)