0

I wonder if anyone can help with this... Below is the code for a short list on a users profile page. I want to be able to style the fixed text ie 'Name', 'Email' and 'User Type' with h2 and the ruby provided content with say h4. My problem is that when I use something like the code on line 6 and embed the h4 content between tags. The text jumps out of sequence and appears on another line. What would be the correct way to organise this so that I can style the ruby with the different tags and keep the text in line.

Many Thanks

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>
Mystic Chimp
  • 105
  • 14
  • see my answer, however if the goal is for h2 and h4 class to appear inline then you should probably just create a span class because h2 and h4 are not designed to be styled inline and it is confusing/unconventional. – Timmy Von Heiss Feb 20 '17 at 02:22
  • Thanks for taking the time to reply @TimmyVonHeiss I'm not too clever with the css html stuff what would the span class look like for the above, taking into account the list, or would I just drop the list tags completely? thx – Mystic Chimp Feb 20 '17 at 02:39

2 Answers2

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

h2, h4 { display: inline-block }

You can also use as a spacer between lines:

What is a clearfix?

Community
  • 1
  • 1
Timmy Von Heiss
  • 2,160
  • 17
  • 39
  • I was hoping that something this simple would work... but afraid not. – Mystic Chimp Feb 20 '17 at 02:38
  • 1
    can you recreate the problem this appears to be working https://jsfiddle.net/xdn1da81/ – Timmy Von Heiss Feb 20 '17 at 02:45
  • I see, you're right. I tried to add my list styling to see if that breaks it, but it still works on the fiddle. Just doesn't work on my end. Must be some other conflicting styling . Thanks for clearing it up, I'll have to unpick my other styling to see what the problem is... I'll mark it as correct. thanks again – Mystic Chimp Feb 20 '17 at 02:51
0

You should close your h2 tag before starting your h4 tag.

<li><h2>User Type: </h2><h4>Admin</h4> </li>
DevJem
  • 656
  • 1
  • 13
  • 21