離子標題與右側的標題和2個按鈕

我正在使用離子建立我的應用程序，我有一個模式視圖，彈出並試圖有HEADER TITLE，然後在TITLE的右側有2個按鈕，但是當我嘗試這樣做，它總是將其中一個按鈕放在左邊。我這裏是主要的代碼片段：離子標題與右側的標題和2個按鈕

 <h1 class="title">Title!</h1> 

     <div class="buttons"> 
     <button class="button">Right Button</button> 
     </div> 
     <div class="buttons"> 
     <button side="right" class="button">Left Button</button> 
     </div> 
    </ion-header-bar>

的完整代碼可用here。

來源

2016-08-10 james dean 999

@Darth_Vader正義事業，你不能瞭解它dosent意味着它應明確downvoted它對其他人有意義，爲什麼它得到了正確的答案 –

這是因爲離子遵守這個規則，選擇buttons類：

.bar .title + .buttons { ... }

這意味着，這些樣式只適用於buttons類的元素，這是直接繼元素與title類！請參閱more information about the plus selector on MDN。

只要把兩個按鈕在div包裝，以避免此行爲：

<div class="buttons"> 
    <button class="button">Right Button</button> 
    <button class="button">Left Button</button> 
</div>

<html ng-app="ionicApp"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title>Ionic Template</title> 
 
    <link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet"> 
 
    <script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script> 
 
</head> 
 

 
<body> 
 
    <ion-modal-view> 
 
    <ion-header-bar class="bar bar-header bar-positive"> 
 
     <h1 class="title">Title!</h1> 
 
     <div class="buttons"> 
 
     <button class="button">Right Button</button> 
 
     <button class="button">Left Button</button> 
 
     </div> 
 
    </ion-header-bar> 
 
    </ion-modal-view> 
 
</body> 
 

 
</html>

來源

2016-08-10 15:39:39 andreas

謝謝你的工作，我只是想知道爲什麼我的代碼中的第二個div放在左側，即使它在第e HTML？ Ionic是否在css中做過某些事情？ –

更新了我的答案與背景... – andreas

離子標題與右側的標題和2個按鈕

回答

相關問題