如何使用css中的flexbox将子元素定位在父元素的另一侧

问题描述 投票:0回答:1

我正在为一个网站制作标题。我的徽标位于右侧,我想将搜索栏放在左侧。我正在用 css 编码并尝试使用 flexbox。

我尝试了很多事情。这是我的 html:

 <body>
      <header>
        <div class="logo">
          <logo picture/>
        </div>
        <div class="search-set">
            <form id="s-bar-holder" role="search">
              <input type="query" id="search-bar" name="q" placeholder="Search..." aria-label="Search the site."/>
            </form>
        </div>
        <div></div>
      </header>
      <main></main>
    </body>

这是我的CSS:

header {
    display: flex;
    background-color: rgb(78,78,78);
    margin-top: -8px;
    margin-left: -7px;
    margin-right: -8px;
    height: 60px;
    width: auto;
    
     
}
.logo {
  height: 60px;
  width: 300px;
  overflow: hidden;
  display: flex;
  align-self: flex-start;
}
.logo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-set {
    display: flex;
    align-self: flex-end;
}
#search-bar {
    background-color: rgb(78,78,78);
    border: none;
    color: rgb(230,230,230);
    outline: none;
    height: 58px;
    width: 200px;
    display: flex;
    justify-content: wrap;

谢谢。

html css search flexbox alignment
1个回答
0
投票

header { 显示:flex;背景颜色: rgb(78, 78, 78);顶部边距:-8px;左边距:-7px;右边距:-8px;高度:60 像素;宽度:自动;弯曲方向:行反转; justify-content:空间之间; }

© www.soinside.com 2019 - 2024. All rights reserved.