列出下面的div元素

Question

我將如何使1-4項在彼此的正下方對齊？

.remove-top-border {
  border-top: none;
}

.remove-bottom-border {
  border-bottom: none;
}

.remove-top-padding {
  padding-top: 0px;
}

<div class="list">

  <div class="item item-input-inset remove-bottom-border">
    <div class="row">
      <div class="col bold">Cost</div>
    </div>
  </div>

  <div class="item item-input-inset remove-top-border remove-top-padding">
    <div class="col col-75">Item 1</div>
    <div class="col col-25">£20</div>
    <div class="col col-75">Item 2</div>
    <div class="col col-25">£20</div>
    <div class="col col-75">Item 3</div>
    <div class="col col-25">£20</div>
    <div class="col col-75">Item 4</div>
    <div class="col col-25">£20</div>
  </div>

</div>

輸出量

上面的代碼目前返回此代碼。

這是我的jsfiddle： http : //jsfiddle.net/39nszmww/2/ 。

Answer 1

您沒有正確使用col類。 離子網格系統基於CSS3 flexbox。 col類分為百分比，總計應為100％。 因此，您可以將行分成任意數量的列 ，只要不超過100個列即可（否則，網格會在您遇到的情況下出錯）。

因此， <div class="col col-50">將創建一列，占該行寬度的50％。

要解決您的問題，請將每個項目分成單獨的一行。 另外，刪除item-input-inset類，因為它會阻止網格垂直擴展。

<div class="item">
    <div class="row">
        <div class="col col-75">Item 1</div>
        <div class="col col-25">£20</div>
    </div>
    <div class="row">
        <div class="col col-75">Item 2</div>
        <div class="col col-25">£10</div>
    </div>
    <div class="row">
        <div class="col col-75">Item 3</div>
        <div class="col col-25">£30</div>
    </div>
</div>

JSFiddle： http : //jsfiddle.net/0tcdr9dg/