Question

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

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

这是一个模型：

最好的方法是什么？

我尝试过显示：正方形的内联块，但是我无法正确定位，以便最外面的正方形与输入框的边缘对齐，中间的正方形居中。给正方形左边距为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;
}

Answer 1

您需要将li元素设为float:left并从ul元素中删除边距/填充

因此，请将.shopping_item_list{display:block;margin:0;padding:0;}和float:left添加到.shopping_item_list li规则。

http://jsfiddle.net/gaby/ZxLHZ/2/

演示

另一件事是您可以使用:nth-child(3n+1)代替:nth-child(1), :nth-child(4), :nth-child(7)等。

Answer 2

您可以使用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的填充重置

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

2 个答案: