将元素和fontawesome图标放在同一行中(Placing element and fontawesome icon in same line)

将元素放在一行中时遇到问题。

我通过容器div中的ajax动态加载ul。 我想让文字在左边对齐，右边的图标在一行中。 因此，该行拉伸容器div以适应并且从不以两行显示文本或图标。

css：

所以这就是我到目前为止所拥有的。

I have a problem placing elements in one line.

I load the ul dynamically via ajax in the container div. I'd like to have the text aligned to the left, the icon to the right, in one line. So the line stretches the container div to fit in and never displays the text or the icon in two lines.

The css:

So this is what I have so far.

最满意答案

如果您愿意，也可以使用flexbox执行此操作。 使li成为flexbox容器。

看例子：

.container {
  display: inline-block;
  position: absolute;
  width: auto;
  min-width: 350px;
  max-width: 600px;
  padding: 10px 0;
  background: #333;
}

ul {
  list-style-type: none;
  color: #eee;
}

li {
  width: 100%;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
}
li span:nth-child(2){
  padding-right: 10px;
} 
  
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css ">
<div class="container">
  <ul id="suggestion_list">
    <li class="mp_search_suggest_element">
      <span><b>some bold text</b> text here</span>
      <span><i class="fa fa-bed fa-fw" aria-hidden="true"></i></span>

    </li>
    <li class="mp_search_suggest_element">
      <span><b>some bold text</b> some long text here</span>
      <span><i class="fa fa-bed fa-fw" aria-hidden="true"></i></span>
    </li>
  </ul>
</div> 
  
 
You can also do this with flexbox if you like. make the li a flexbox container.
 
see example:
 
 
 
  
  
.container {
  display: inline-block;
  position: absolute;
  width: auto;
  min-width: 350px;
  max-width: 600px;
  padding: 10px 0;
  background: #333;
}

ul {
  list-style-type: none;
  color: #eee;
}

li {
  width: 100%;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
}
li span:nth-child(2){
  padding-right: 10px;
} 
  
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css ">
<div class="container">
  <ul id="suggestion_list">
    <li class="mp_search_suggest_element">
      <span><b>some bold text</b> text here</span>
      <span><i class="fa fa-bed fa-fw" aria-hidden="true"></i></span>

    </li>
    <li class="mp_search_suggest_element">
      <span><b>some bold text</b> some long text here</span>
      <span><i class="fa fa-bed fa-fw" aria-hidden="true"></i></span>
    </li>
  </ul>
</div>