레일즈 스타일링 CSS

누군가가이 문제를 도울 수 있는지 궁금합니다 ... 다음은 사용자 프로필 페이지의 간단한 목록 코드입니다. 고정 된 텍스트 즉, '이름', '이메일'및 '사용자 유형'(h2) 및 루비 제공 컨텐츠 (h4)를 스타일화할 수 있기를 원합니다. 내 문제는 내가 6 행에 코드와 같은 것을 사용하고 태그 사이에 h4 콘텐츠를 삽입 할 때이다. 텍스트가 순차적으로 건너 뛰고 다른 줄에 나타납니다. 다른 태그를 사용하여 루비를 스타일링하고 텍스트를 라인에 유지할 수 있도록 올바른 방법으로 구성 할 수 있습니다.레일즈 스타일링 CSS

많은 감사

1<div class="profile-content"> 
2 <ul> 
3  <li><h2>Name: <%= @user.name %></h2></li> 
4  <li><h2>Email: <%= @user.email %></h2></li> 
5  <% if @user.admin %> 
6  <li><h2>User Type: <h4>Admin</h4> </h2></li> 
7  <% else %> 
8  <li><h2>User Type: Standard</h2></li> 
9  <% end %> 
10 </ul> 
11</div>

출처

2017-02-20 Mystic Chimp

이 목표는 다음 인라인을 표시 당신은 아마해야 만하는 H2 및 H4 클래스입니다 그러나 경우, 내 대답을 참조 h2 및 h4가 인라인 스타일로 설계되지 않았기 때문에 스팬 클래스를 작성하고 혼동 스럽거나 비 전통적인 것입니다. –

@TimmyVonHeiss에게 회신 할 시간을내어 주셔서 감사합니다. css html과 너무 똑똑하지 않아서 스팬 클래스가 위의 목록처럼 보이거나 계정 목록에 포함되지 않습니까? 아니면 목록 태그를 완전히 삭제하겠습니까? thx –

<li><h2>User Type:</h2> <h4>Admin</h4> </li> 

h2, h4 { display: inline-block }

또한 선 사이의 스페이서로 사용할 수

이 What is a clearfix?

출처

2017-02-20 02:21:08

나는이 간단한 것이 효과가있을 것이라고 기대했지만 ... 두려워하지 않았습니다. –

이 문제가 재현 될 수 있습니까? https://jsfiddle.net/xdn1da81/ –

알겠습니다. 당신 말이 맞습니다. 나는 목록 스타일링을 추가하여 그것을 깨뜨리는 지 보려고했지만, 여전히 바이올린에서 작동합니다. 그냥 내 끝에서 작동하지 않습니다. 다른 충돌하는 스타일이어야합니다. 문제를 해결해 주셔서 고마워요, 다른 스타일링을 해제하여 문제가 무엇인지 확인해야합니다 ... 올바른 것으로 표시하겠습니다. 다시 한 번 감사드립니다. –

당신은 당신의 H4 태그를 시작하기 전에 H2 태그를 닫아야합니다.

<li><h2>User Type: </h2><h4>Admin</h4> </li>

출처

2017-02-20 02:20:58 DevJem

답변

관련 문제