css-float - 内联块，浮点或其他解决方案，以使正方形与两侧的输入边缘对齐

我正在创建一个页面，该页面的顶部有一个输入框，下面是三个正方形的行。这是一个购物清单应用程序，当您在输入框中添加项目时，它将创建一个新的正方形。

我想将正方形1的左边缘与输入框的左边缘对齐，并将正方形3的右边缘与输入框的右边缘对齐，并使中间的正方形居中。

这是一个模型：

做这个的最好方式是什么？

我尝试用display：inline-block放置正方形，但是我无法正确定位，因此最外面的正方形与输入框的边缘对齐，中间的正方形居中。将正方形的左边距设置为5％，然后从第一个正方形中删除左边距似乎已接近，但在Safari中已关闭。

我也尝试过使用浮点数，但是我需要重新排列列表的顺序，以便进行排序：正方形1，正方形3，正方形2。正方形1浮动在左侧，正方形2浮动在右侧。这弄乱了我分配给每个奇数列表项的粉红色背景色。还要求我插入空的div以清除每一行的浮点数。

使方形边缘与输入框中的边缘对齐并使中间边缘居中的最佳解决方案是什么？

HTML：

    <div class="wrapper">

    <form>
        <input type="text" placeholder="I need to buy..." name="shopping_item" class="shopping_item">
    </form>
    <ul class="instructions">
        <li>Double-click square to edit</li>
        <li>|</li>
        <li>Click and drag square to rearrange</li>
        <li>|</li>
        <li>Click on text to cross off</li>
        <li>|</li>
        <li>Hover and click “Delete” to delete</li>
    </ul>
    <section>
        <h1 class="outline">Shopping List Items</h1>
        <ul class="shopping_item_list">
            <li>Flowers<span class="delete">Delete</span></li>
            <li>A gift card for mom's birthday<span class="delete">Delete</span></li>
            <li>A birthday card<span class="delete">Delete</span></li>
            <li>Yogurt<span class="delete">Delete</span></li>
            <li>Applesauce<span class="delete">Delete</span></li>
            <li>Iced tea<span class="delete">Delete</span></li>
            <li>Ice cream<span class="delete">Delete</span></li>
            <li>Laundry detergent<span class="delete">Delete</span></li>
            <li>Sandwich bags<span class="delete">Delete</span></li>
        </ul>
    </section>
</div><!--end wrapper-->

CSS：

    .wrapper {
margin-left: 100px;
margin-right: 100px;
    }

   .lPadding {
padding-left: 100px;
    }

   .rPadding {
padding-right: 100px;
    }

    input[name="shopping_item"], input[name="shopping_item"]:focus {
margin-top: 50px;
width: 94.4%;
padding-left: 2.8%;
padding-right: 2.8%;
border: 1px solid #b7b7b7;
height: 91px;
border-radius: 5px;
box-shadow:none;
font-size: 24px;
}

   .shopping_item_list li {
background-color: #6ea24a;
display:inline-block;
vertical-align:top;
width: 25%;
min-height: 150px;
padding-top: 67px;
padding-left:2.5%;
padding-right:2.5%;
padding-bottom: 25px;
margin-bottom: 50px;
margin-left: 5%;
color: #fff;
font-size: 30px;
text-align: center;
position: relative; /* To position Delete span */
}

   .shopping_item_list li:nth-child(1), .shopping_item_list li:nth-child(4),
   .shopping_item_list li:nth-child(7) {
margin-left:0;
}


    .shopping_item_list li:nth-child(odd) {
background-color: #ec5084;
}

最佳答案

您可以使用text-align属性或flex属性：

文本对齐属性：DEMO

.shopping_item_list {
  text-align:justify
}
.shopping_item_list:after {/*add an extra lineso  last line of element is justified too*/
  content:'';
  width:100%;
  display:inline-block;
}

弯曲特性：DEMO

.shopping_item_list {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

两种方法都请注意ul的填充重置

关于css-float - 内联块，浮点或其他解决方案，以使正方形与两侧的输入边缘对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23912424/