Question

所以我在html中进行显示。我有一个导航栏我想从屏幕的左上方向下走，一条标签从导航栏到屏幕的另一侧。我目前有一个标签栏从左上角到右上角，导航栏从标签底部向下。如果我让导航栏从顶角开始，则选项卡从屏幕中间开始，而不是从顶部运行。基本上我希望它看起来像这样： _____++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ _ n _+ tabs + _ a _++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ _ v _ _ _ _ _ 而不是

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + tabs + ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++_____ _ n_ _ a_ _ v_

这是我的代码

<core-toolbar>
  <paper-tabs class="tabs" valueattr="name" selected="all" self-end>
    <paper-tab name="social" class="tab">SOCIAL</paper-tab>
    <paper-tab name="activity" class="tab">ACTIVITY</paper-tab>
    <paper-tab name="regularity" class="tab">REGULARITY</paper-tab>
  </paper-tabs>
</core-toolbar>
  <div class="navigation">
<div class="navTab">Results</div>
<div class="navTab">History</div>
<div class="navTab">Questions</div>
</div>

Answer 1

您可以将div放在工具栏之前，然后在div上使用float:left;。

<div class="navigation">
    <div class="navTab">Results</div>
    <div class="navTab">History</div>
    <div class="navTab">Questions</div>
</div>
<core-toolbar>
    <paper-tabs class="tabs" valueattr="name" selected="all" self-end>
    <paper-tab name="social" class="tab">SOCIAL</paper-tab>
    <paper-tab name="activity" class="tab">ACTIVITY</paper-tab>
    <paper-tab name="regularity" class="tab">REGULARITY</paper-tab>
    </paper-tabs>
</core-toolbar>

CSS

.navigation {
    float: left;
}

Answer 2

这样做：

<core-toolbar>
 <paper-tabs class="tabs" valueattr="name" selected="all" self-end>
  <paper-tab name="social" class="tab">SOCIAL</paper-tab>
  <paper-tab name="activity" class="tab">ACTIVITY</paper-tab>
  <paper-tab name="regularity" class="tab">REGULARITY</paper-tab>
 </paper-tabs>
</core-toolbar>
<div class="navigation" style="float: left;">
 <div class="navTab">Results</div>
 <div class="navTab">History</div>
 <div class="navTab">Questions</div>
</div>

我刚刚添加了style="float: left;"。无需改变任何东西。

在我的html显示中获得正确的角落

2 个答案: