Ионный заголовок с заголовком и 2 кнопками на правой стороне

Я использую Ionic для создания своего приложения, и у меня есть модальный вид, который появляется, и я пытаюсь получить HEADER TITLE, а затем у вас есть 2 кнопки справа от TITLE, но когда Я пытаюсь это сделать, он всегда ставит одну из кнопок слева. Я вот основной фрагмент кода:Ионный заголовок с заголовком и 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 просто потому что вы не можете понять, что это значит, доцент должен быть 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? Ион сделал что-то в css, чтобы это произошло? –

Обновлен мой ответ с фоном ... – andreas

Ионный заголовок с заголовком и 2 кнопками на правой стороне

ответ

Смежные вопросы