Question

我试图在Safari和Firefox上获得相同宽度的范围。

我的代码可以在Bootply

看到

看起来像这样：

＆＃13;

<div class="container">
<div class="row text-center">
  <div class="col-md-1">    
  </div>
  <div class="col-md-5  text-center">
    <div>               
      <div class="input-group">
      <span class="input-group-btn">
          <button class="btn btn-default" type="button" onclick="codeAddress()">
          <i class="fa fa-map-marker"></i></button>
      </span>
      <input id="address" type="text" class="form-control" placeholder="Enter your address" style="max-width:256px;width:256px;">
     </div>
<br>
           
      <div class="input-group">
        <input type="button" id="useAddress" value="Use address" class="outnowButtonOnGrey" style="width:131px;" onclick="codeAddress()">
        <span style="padding-left:7px;padding-right:7px;max-width:28px;" class="text-center">or</span>
        <input type="button" id="getCurrentLocation" value="Current location" class="outnowButtonOnGrey" style="width:131px;"><!-- 139px padding-left:20px;padding-right:20px;-->
      </div>
    </div>
  </div>
  <div class="col-md-5  text-center">  
    Some text
  </div>
  <div class="col-md-1">          
  </div>
</div>

＆＃13;

我尝试过各种最大宽度，宽度，最小宽度的组合，但是在Safari和Firefox上无法获得跨度的宽度。

在Safari上我得到了我想要的效果，即左右两个按钮与上面的输入字段对齐。在Firefox上，按钮不再正确对齐。

Answer 1

span是一个内联元素而不是盒子元素，宽度不适用于具有样式的元素＆＃34; display：inline＆＃34 ;, button是style＆＃34; display：inline-block＆＃34; - 可以设置宽度。所以在按钮上设置宽度。

在Firefox上为Safari提供相同的宽度

1 个答案: