与显示并排的表格组:内联块;使用Firefox而不是使用Chrome

时间:2017-06-10 18:47:15

标签: css forms twitter-bootstrap input

我正在使用display: inline-block;并排多个表单组,它与Firefox合作但不与Chrome合作。

HTML:

<div class="form-group dis-inl-blc mar-l-20">
    <div class="input-group">
        <span class="input-group-addon">50x25cm :</span>
        <span class="value">Black</span>
    </div> 
</div>
<div class="form-group dis-inl-blc mar-l-20">
    <div class="input-group">
        <span class="input-group-addon">50x40cm :</span>
        <span class="value">Grey, White /  Black /  Gold, Bronze</span>
    </div> 
</div>
<div class="form-group dis-inl-blc mar-l-20">
    <div class="input-group">
        <span class="input-group-addon">50x50cm :</span>
        <span class="value">Gold, Bronze</span>
    </div> 
</div>

CSS:

.dis-inl-blc {
  display: inline-block;
  vertical-align:top;
}
.value {
      display:inline-block;
    background-color: white;
    border: 1px solid lightgrey;
    height:30px;
    padding: 4px 10px;
    border-radius: 0 4px 4px 0;
}
.mar-l-20 {
  margin-left: 20px;
}

JSfiddle:http://jsfiddle.net/8osL6xhf/

如何使这些倍数与Chrome并排形成组?

1 个答案:

答案 0 :(得分:1)

您好尝试将display属性更改为inline-table。

请尝试以下代码。

CSS

.dis-inl-blc {
  display: inline-table;
  vertical-align:top;
}

希望这有效..