列表项水平间距

Question

I have the following list and want to add another element to list element with Name . So I am adding Primary User but want the new element Primary User styled to the right of the line. What's the best way to do this? Is it awkward doing this to a list item? Thanks.

      <div class="panel-heading">Company Details</div>
        <ul class="list-group">
          <li class="list-group-item"><b>Name:</b> <%= @company.name %><b>Primary User:</b><%= @company.primary %></li>```

Answer 1

One possibility would be to use float right. Don't know if it is the best one and there are probably plenty others, but it will work.

HTML

<div class="panel-heading">Company Details</div>
<ul class="list-group">
  <li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
  </li>
  <li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
  </li>
  <li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
  </li>
</ul>

CSS

.user {
  float: right;
}

.list-group {
  width: 250px;
}

https://jsfiddle.net/zy7d48ub/

Answer 2

Wrap your code inside this div wrapper and it should work.

<div class = "panel-heading-wrapper" style = "display: flex;">

Answer 3

I find myself using (maybe overusing?) css grid a lot for layouts such as this. It has so much flexibility for fine-tuning the layout. My approach would be:

<div class="panel">
  <div class="panel-heading">
    Company
  </div>
  <div class="name">
    Name
  </div>
  <div class="user">
    User
  </div>
</div>

.panel {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 20px 20px;
  grid-template-areas: 'heading heading''name user'
}

.panel-heading {
  grid-area: heading;
}

.name {
  grid-area: name;
}

.user {
  grid-area: user;
}

here's what it looks like on jsfiddle