Question

getting both tag on same row but there size are not equal...

我想在同一行上制作两个div标签“Add More Item”和“Remove Item”的电子宽度......

 <div data-role="controlgroup" data-type="horizontal" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all" style="margin: 20px; width: auto">

            <div class="ui-btn ui-first-child"   style="   position: relative;  center; background-color: #36CD5A; color: #fff; text-shadow: none !important;"  data-inline="true" onclick="javascript:addNewItem()">Add More Item</div>

            <div class="ui-btn ui-last-child"  style="  position: relative; text-align: center; background-color: #36CD5A; color: #fff; text-shadow: none !important;"  onclick="javascript:removeAddedItem()">Remove Item</div>
        </div>

Answer 1

试试这个：

<div data-role="controlgroup" data-type="horizontal" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all" style="margin: 20px; width: auto;background-color:#36CD5A;">

    <div class="ui-btn ui-first-child" style="   position: relative;  center; color: #fff; text-shadow: none !important;display: inline;" data-inline="true" onclick="">Add More Item</div> |

    <div class="ui-btn ui-last-child" style="  position: relative; text-align: center;color: #fff; text-shadow: none !important;display: inline;" onclick="">Remove Item</div>
</div>

jsfiddle

Answer 2

添加width:50%和float:left，下面是代码

<div data-role="controlgroup" data-type="horizontal" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all" style="margin: 20px; width: auto">
  <div class="ui-btn ui-first-child"   style="text-align:center; background-color: #36CD5A; width:50%;float:left"  data-inline="true" onclick="javascript:addNewItem()">Add More Item</div> 
  <div class="ui-btn ui-last-child"  style="text-align: center; background-color: yellow; width:50%;float:left"  onclick="javascript:removeAddedItem()">Remove Item</div>
</div>

Answer 3

您可以通过table或css伪属性制作。这里是完整的扩展示例。看看https://css-tricks.com/fluid-width-equal-height-columns/

Answer 4

所有示例均为示例，请勿复制和粘贴。

示例内联块，响应，nth-child（范围）

.wrapper {
  width: 90%;
  outline: 1px green solid;
  margin: 0 auto;
}
.wrapper > div {
  width: 49%;
  display: inline-block;
  outline: solid yellow;
}
.wrapper > div:nth-child(-n+2) {
  background-color: green;
}
.wrapper > div:nth-child(n+3):nth-child(-n+4) {
  background-color: red;
}
.wrapper > div:nth-child(n+5):nth-child(-n+6) {
  background-color: pink;
}

<div class="wrapper">
  <div>
    i love red
  </div>
  <div>
    i love pink
  </div>
  <div>
    i love green
  </div>
  <div>
    i love creeps
  </div>
  <div>
    i love green
  </div>
  <div>
    i love purple
  </div>
</div>

示例flex

.wrapper2 {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}
.wrapper2 > div {
  width: 50%;
}

<div class="wrapper2">
  <div>
    i love red
  </div>
  <div>
    i love pink
  </div>
  <div>
    i love green
  </div>
  <div>
    i love creeps
  </div>
  <div>
    i love green
  </div>
  <div>
    i love purple
  </div>
</div>

有很多方法可以做你所要求的，所以提供更多细节，以便我们能够更好地帮助你。

在相同的horizental行中制作相等宽度的DIV标签？

4 个答案: