Question

我的元素很少，2 <div ng-controller="FirstCtrl as vm"> <table> <tbody> <tr ng-repeat="name in names"> <td>{{name.name}}</td> <td>{{name.data}}</td> </tr> </tbody> </table> <button ng-click="vm.reloadData()">Reload</button> </div>和1 i。我在名为w3.css的框架中使用input的布局，以及名为FontAwesome的字体图标库。自w3-col + s7 = s5以来，为什么我的元素仍然会落到新行？ div s12中的3个元素应该在同一行。希望你们能帮助我。

s5

Answer 1

w3.css目前不支持“输入组”。我使用术语输入组，因为这是Twitter Bootstrap用来指代您正在寻找的内容的术语。我们可以做的是检查Bootstrap input-group代码，并扩展w3.css的代码以包含类似的前缀版本。很遗憾，w3.css已经使用了课程w3-input-group，因此我们将使用w3-inline-input-group。

<强> HTML

<div class="w3-row w3-section">
    <div class="w3-col s7">
        <label><b>Apple</b></label>
    </div>
    <div class="w3-col s5 w3-inline-input-group">
        <i id="plus" class="fa fa-plus w3-input-group-addon"></i>
        <input id="noOfApple" class="w3-input w3-border-0" type="text" name="noOfApple" value="1" size="3">
        <i id="minus" class="fa fa-minus w3-input-group-addon"></i>
    </div>
</div>

<强> CSS

.w3-inline-input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.w3-inline-input-group .w3-input {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}
.w3-inline-input-group .w3-input:focus {
    z-index: 3;
}
.w3-input-group-addon,
.w3-inline-input-group .w3-input {
    display: table-cell;
}
.w3-input-group-addon
{
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.w3-input-group-addon {
    font-size: 24px;
    font-weight: normal;
    line-height: 1;
    text-align: center;
}

<强> JSFIDDLE

注意：JsFiddle不允许包含非https外部文件，因此请滚动到css窗格的BOTTOM以查找新的/上面的css

PS。如果你在项目中没有走得太远，并且你将要使用form元素，我会强烈建议查看Twitter Bootstrap CSS框架（你可以自定义）导出库，如果你想构建所有自己的东西，排除所有JS，但同样，他们有很多非常有用的开箱即用的代码，我建议）。这是一个很好的起点，并且使用得更广泛w3.css（至少就工作要求了解它而言）

Answer 2

你写的Markup是正确的。您自己的代码可能覆盖s7和s5 类属性float: left;

如果您发现它被覆盖，请更正此问题。

还为输入组件添加此样式

`.s5 {
  position: relative;

}

.s5 input {
   padding: 8px 15px;
}
.s5 i {
  z-index: 1; 
}
.s5 #plus { 
  position: absolute;
  left: 0;
  top: 5px
}
.s5 #minus { 
  position: absolute;
  right: 0;
  top: 8px
}`

这是您的代码的实时示例:)

http://codepen.io/kaushik/pen/JERMwg

W3.css如何在一行中制作？

2 个答案: