왼쪽에서 용지 탭 이동 Polymer

어떻게 용지 탭을 왼쪽으로 정렬합니까? margin-left: 0;을 사용해 보았지만 작동하지 않았습니다. 브라우저에서 HTML 파일을 검사했을 때 추가하지 않은 탭 옆에 종이 아이콘 버튼이있는 것 같습니다. 아마도 종이 탭의 스크롤 가능한 특성 때문에 거기에있을 것입니다. 그렇다면 종이 탭의 스크롤 가능한 특성을 손상시키지 않고 왼쪽으로 어떻게 이동합니까?왼쪽에서 용지 탭 이동 Polymer

코드 :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <!--Website metadata--> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Test</title> 
    <!--Polymer elements--> 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> 
    <link rel="import" href="bower_components/app-layout/app-header/app-header.html"> 
    <link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html"> 
    <link rel="import" href="bower_components/paper-button/paper-button.html"> 
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html"> 
    <link rel="import" href="bower_components/paper-tabs/paper-tab.html"> 
    <link rel="import" href="bower_components/app-layout/app-scroll-effects/app-scroll-effects.html"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
    <!--Main stylesheet--> 
    <link rel="stylesheet" href="app.css"> 
    <!--Style for polymer elements--> 
    <style is="custom-style"> 
     app-header{ 
      background: #FFFFFF; 
     } 
     paper-toolbar{ 
      --paper-toolbar-background: #ffffff; 
      color: #000000; 
     } 
     paper-tabs{ 
      -webkit-font-smoothing: antialiased; 
      width: 100%; 
      text-transform: none; 
      margin-bottom: 0; 
      color: #757575; 
      --paper-tabs-selection-bar-color: #1db886; 
     } 
     paper-tab{ 
      --paper-tab-ink: #ffffff; 
      font-weight: 400; 
     } 
     paper-tab.iron-selected{ 
      color: #1db886; 
     } 
     #app-title{ 
      font-size: xx-large; 
      font-weight: 200; 
      margin: 0; 
     } 
    </style> 
</head> 
<body> 
    <!--App header--> 
    <app-header reveals shadow> 
     <paper-toolbar> 
      <div class="title" id="app-title">Test</div> 
     </paper-toolbar> 
     <paper-tabs selected="0" scrollable> 
      <paper-tab>Home</paper-tab> 
      <paper-tab>Test</paper-tab> 
      <paper-tab>Test</paper-tab> 
      <paper-tab>Test</paper-tab> 
      <paper-tab>Test</paper-tab> 
     </paper-tabs> 
    </app-header> 
</body> 
</html>

출처

2017-02-17 Nikhil Raghavendra

'paper-tabs' 요소에서'scrollable'과 같은 속성을 사용하고 있습니까? 일부 코드는 도움이 될 수 있습니다 –

@ KubaŠimonovský 예, 스크롤 가능을 사용하고 있습니다. 코드 편집을 참조하십시오. –

@ KubaŠimonovský 편집이 추가되었습니다. –

가 도움이 될 CSS의 일부의 조각을주기 : P이 시도, 상점!

float:left;

출처

2017-02-17 03:30:51

이것은 나를 위해 작동하지 않았다. 코드를 추가했습니다. 편집을 참조하십시오. –

답변

관련 문제