Question

我没有太多的前端经验，所以我正在努力学习，而且我遇到了一个可能有一个简单解决方案的问题。我有4个组件，2个按钮和2个选项卡。我希望它们在页面顶部的标题中设置样式，使得一个按钮位于左上角，带有一些填充，另一个按钮位于右上角，带有一些填充，而标签位于中间的中间。我使用jquery jquery mobile和angularjs。我对它们进行了一些研究，并没有在api中看到任何可以轻松完成此任务的内容，所以我想我需要自定义css。现在我的组件是：

<button>Button 1</button>
<div data-role="tabs" id="tabs"> 
    <div data-role="navbar">
        <ul>
            <li ng-class="{active: navigation.isSelected(1)}" > 
                <button ng-click="navigation.selectTab(1)">Tab 1</button> 
            </li>
            <li ng-class="{active: navigation.isSelected(2)}"> 
                <button class="ui-btn-active" ng-click="navigation.selectTab(2)">Tab 2</button> 
            </li>
         </ul>
    </div>
</div>
<button>Button 2</button>

我尝试将整个东西包裹在另一个div中并设置浮动但是当我尝试将第二个按钮上的浮子设置为右边时，它将它放在一个新线上，我不相信有一个浮动中心。再一次，我对此非常陌生，所以任何正确方向的指南都会非常感激！

Answer 1

在元素周围添加div，将其设置为position到relative
提供标签div和两个按钮classes或ids并使用这些按钮设置标签div和两个按钮position至absolute
根据需要设置元素“top，left和right”
您需要使用百分比设置每个元素的宽度，以便它们不会尝试相互重叠

您可能需要调整值以满足您的需求，但以下内容适用于您：

这是working jsFiddle

<强> CSS

.myHeader{
    position: relative;
    height:62px;
}
.left-btn{
    width:10% !important; 
    position: absolute;
    left: 1%;
}
.right-btn{
    width:10% !important;
    position: absolute;
    right: 1%;
}
#tabs{
    width:75%;
    position: absolute;
    top: 10px;
    left: 12%;
}

<强> HTML

<div class="myHeader">
<button class="left-btn">Button 1</button>
<div data-role="tabs" id="tabs"> 
    <div data-role="navbar">
        <ul>
            <li ng-class="{active: navigation.isSelected(1)}" > 
                <button ng-click="navigation.selectTab(1)">Tab 1</button> 
            </li>
            <li ng-class="{active: navigation.isSelected(2)}"> 
                <button class="ui-btn-active" ng-click="navigation.selectTab(2)">Tab 2</button> 
            </li>
         </ul>
    </div>
</div>
<button class="right-btn">Button 2</button>
</div>

标题中的样式按钮和选项卡

1 个答案: