오른쪽에 제목과 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를 명확을 downvoted한다 다른 사람들에게 이해가되고 왜 올바른 답을 얻었는지 –

이온이 규칙 다음 buttons 클래스를 선택하기 때문에 발생

: 이러한 스타일 만 클래스 buttons의 요소에 적용하는 것이

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

의미, 즉 직접 클래스 title와 요소를 다음입니다! more information about the plus selector on MDN을 참조하십시오.

그냥이 동작을 방지하기 위해 div 래퍼 함께 두 개의 버튼을 넣어 : 그것을 의미 dosent 당신이 이해하지 못할 정당한 사유

<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가 왜 왼쪽에 있는지 궁금합니다. 전자 HTML? 이오니아는 CSS에서 어떤 일을 했습니까? –

내 배경이 업데이트되었습니다 ... – andreas

오른쪽에 제목과 2 개의 버튼이있는 이모니컬 헤더

답변

관련 문제