在 CSS 中将项目向左对齐

Question

您好，我希望输入框显示在第一个 div 下方的左侧。我这样做的方式是，我必须使用多个媒体查询将其正确对齐到左侧以实现多种分辨率。我怎样才能以最好的方式做到这一点？或者使用不同分辨率的媒体查询是唯一的方法。 我已注释掉我为其中一项解决方案尝试的媒体查询

.inputPlace {
  position: relative;
  margin-top: 0px;
  padding-right: 33px;
  width: 310px;
  height: 61px;
  color: rgb(4, 30, 67);
  background-color: rgb(255, 255, 255);
  padding-top: 0px;
  padding-left: 20px;
  transition: border-color 300ms ease-out 0s, padding-top 100ms ease-out 0s;
  font-size: 17px;
  margin-bottom: 20px;
  margin-left: 22px;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  z-index: 1;
  position: relative;
  border-style: none;
  right: 60px;
  bottom: 1px;
  background-color: green;
  top: 10px;
}

.inputstore {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* @media screen and (min-width:1800){
        .inputstore {
       position: absolute;
       top: 210px;
       left: 20px;
        }
        } */

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien
    felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis
    sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien
    felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis
    sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p>
</div>
<div class="inputstore">
  <div><input type="text" id="storenum" placeholder="Search" class="inputPlace" value="">
    <button onclick="check_number()" type="button" class="btn btn btn-circle btn-lg"> </button>
  </div>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien
    felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis
    sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p>
</div>

Answer 1

对于 align 使用 justify-content: left; 而不是 center 类 inputstore 对于订单使用 flex：

* ADDED */
section{
  display: flex;
  flex-direction:column;
}
section > div ~ div{
  order:3;
}
section > div:nth-child(1){
  order:1;
}
section > div.inputstore{
  order:2;
}

通过display grid订购：

section{
  display: grid;
}
section > div.inputstore{
  grid-row-start: 2;
}

使用 Flex 进行演示

.inputPlace {
    position: relative;
    margin-top: 0px;
    padding-right: 33px;
    width: 310px;
    height: 61px;
    color: rgb(4, 30, 67);
    background-color: rgb(255, 255, 255);
    padding-top: 0px;
    padding-left: 20px;
    transition: border-color 300ms ease-out 0s, padding-top 100ms ease-out 0s;
    font-size: 17px;
    margin-bottom: 20px;
    margin-left: 22px;

}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;

    z-index: 1;
    position: relative;
    border-style: none;
    right: 60px;
    bottom: 1px;
    background-color: green;
    top:10px;
}
 .inputstore {
    display: flex;
/*          justify-content: center;*/
    justify-content: left;  /* New */
    align-items: center;
}


/* @media screen and (min-width:1800){
  .inputstore {
  position: absolute;
  top: 210px;
  left: 20px;
  }
} */
        
/* ADDED */
section{
  display: flex;
  flex-direction:column;
}
section > div ~ div{
  order:3;
}
section > div:nth-child(1){
  order:1;
}
section > div.inputstore{
  order:2;
}

<section>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p></div>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p></div>
    <div class="inputstore">
        <div><input type="text" id="storenum" placeholder="Search" class="inputPlace" value="">
            <button onclick="check_number()" type="button" class="btn btn btn-circle btn-lg"> </button>
        </div>
    </div>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p></div>
</section>

带有display grid的DEMO-2

.inputPlace {
    position: relative;
    margin-top: 0px;
    padding-right: 33px;
    width: 310px;
    height: 61px;
    color: rgb(4, 30, 67);
    background-color: rgb(255, 255, 255);
    padding-top: 0px;
    padding-left: 20px;
    transition: border-color 300ms ease-out 0s, padding-top 100ms ease-out 0s;
    font-size: 17px;
    margin-bottom: 20px;
    margin-left: 22px;

}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;

    z-index: 1;
    position: relative;
    border-style: none;
    right: 60px;
    bottom: 1px;
    background-color: green;
    top:10px;
}
 .inputstore {
    display: flex;
/*          justify-content: center;*/
    justify-content: left;  /* New */
    align-items: center;
}


/* @media screen and (min-width:1800){
  .inputstore {
  position: absolute;
  top: 210px;
  left: 20px;
  }
} */
        
/* ADDED */
section{
  display: grid;
}
section > div.inputstore{
  grid-row-start: 2;
}

<section>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p></div>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p></div>
    <div class="inputstore">
        <div><input type="text" id="storenum" placeholder="Search" class="inputPlace" value="">
            <button onclick="check_number()" type="button" class="btn btn btn-circle btn-lg"> </button>
        </div>
    </div>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p></div>
</section>

Answer 2

您可以使用justify-content: flex-start; 对齐左侧的搜索框。

回答您的第二个问题，如果您没有使用@media Rule，CSS 将适用于所有屏幕分辨率。这意味着您不必针对每个屏幕分辨率进行调整，因为它会自动实现。

除非您需要在不同的屏幕分辨率上使用不同的样式，否则您可以参考我在 CSS cmets 中的示例。

.inputPlace {
  position: relative;
  margin-top: 0px;
  padding-right: 33px;
  width: 310px;
  height: 61px;
  color: rgb(4, 30, 67);
  background-color: rgb(255, 255, 255);
  padding-top: 0px;
  padding-left: 20px;
  transition: border-color 300ms ease-out 0s, padding-top 100ms ease-out 0s;
  font-size: 17px;
  margin-bottom: 20px;
  margin-left: 22px;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  z-index: 1;
  position: relative;
  border-style: none;
  right: 60px;
  bottom: 1px;
  background-color: green;
  top:10px;
}
.inputstore {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
       
/* This is for screen resolution equal and lesser than 768px

@media screen and (max-width: 768px) {
  .inputstore {
    background: blue;
  }
}

*/

<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p></div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p></div>
<div class="inputstore">
        <div><input type="text" id="storenum" placeholder="Search" class="inputPlace" value="">
        <button onclick="check_number()" type="button" class="btn btn btn-circle btn-lg"> </button>
        </div>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero velit, lobortis et laoreet a, gravida et neque. Mauris laoreet efficitur massa, vitae congue turpis aliquet tristique. Ut scelerisque, nibh elementum pellentesque euismod, sapien felis ultrices enim, sed convallis massa erat a elit. Aenean tristique ante id mi maximus, non posuere odio fringilla. Mauris fermentum nulla eu ligula pellentesque, nec condimentum urna semper. Aliquam consectetur a tellus et elementum. Aenean felis sem, tincidunt id tortor ac, lacinia sodales lorem. Sed malesuada mi eros, ut malesuada diam posuere eget.</p></div>