Html noobs布局

Question

如何使这3个元素（跨度，输入，输入）出现在同一行？就像现在一样，跨度采用左列和2行，2个输入采用右列一个

           <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">www</span>
                <input type="text" class="form-control" placeholder="Url" ng-model="currentUrl"/>
                <input type="button" class="btn btn-primary" value="Go" ng-click="getUrl()" />
            </div>

Answer 1

假设您使用的是bootstrap，则需要使用.input-group-button类...

DEMO

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">www</span>
  <input type="text" class="form-control" placeholder="Url" ng-model="currentUrl">

  <span class="input-group-btn">
    <input type="button" class="btn btn-primary" value="Go" ng-click="getUrl()">
  </span>
</div>

The docs

Answer 2

只需添加以下css

即可

span{
width:200px;
float:left;

}

input{
width:300px;
float:left;
}