Rails erb styling CSS

Интересно, может ли кто-нибудь помочь с этим ... Ниже приведен код для краткого списка на странице профиля пользователя. Я хочу, чтобы уметь фиксировать фиксированный текст, т. Е. «Имя», «Электронная почта» и «Тип пользователя» с h2, а контент с рубином - h4. Моя проблема в том, что когда я использую что-то вроде кода в строке 6 и встраиваю содержимое h4 между тегами. Текст выходит из строя и появляется на другой строке. Каким будет правильный способ организовать это, чтобы я мог стилизовать ruby с разными тегами и сохранить текст в строке.Rails erb styling 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 появляться инлайн, то вы должны, вероятно, просто создайте класс span, потому что h2 и h4 не предназначены для создания встроенных строк, и это запутывает/нетрадиционно. –

Спасибо, что нашли время, чтобы ответить @TimmyVonHeiss. Я не слишком умен от css html, что бы класс span выглядел как указано выше, принимая во внимание список, или я бы просто полностью удалил теги списка? 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/ –

Я вижу, вы правы. Я попытался добавить мой стиль списка, чтобы увидеть, если это сломает его, но он все еще работает на скрипке. Просто не работает на моем конце. Должен быть какой-то другой конфликтный стиль. Спасибо, что разобрал его, мне придется раскрыть мой другой стиль, чтобы понять, в чем проблема ... Я буду отмечать его как правильную. еще раз спасибо –

Вы должны закрыть h2 тег перед началом h4 тега.

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

источник

2017-02-20 02:20:58 DevJem

ответ

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