将项目左对齐 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

对于 class inputstore 上的对齐使用 justify-content: left; 而不是 center 对于订单使用 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>

DEMO-2 `display grid`

.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 规则，CSS 将适用于所有屏幕分辨率。这意味着您不必针对每个屏幕分辨率进行调整，因为它会自动实现。

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

.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>

将项目左对齐 CSS

Aligning the item to the left in CSS

html

css

media-queries

display

带有 Flex 的演示

DEMO-2 `display grid`

将项目左对齐 CSS

Aligning the item to the left in CSS

html

css

media-queries

display

带有 Flex 的演示

DEMO-2 display grid

DEMO-2 `display grid`