Question

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

<div class="container">
  <ul id="suggestion_list"> 
    <li class="mp_search_suggest_element">
        <span >
            <b>some bold text</b> here 
            <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
            <i class="fa fa-bed fa-fw" aria-hidden="true"></i>
        </span>
    </li>
  </ul>
</div>

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

css：

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

 ul{
   list-style-type: none;
 }

 li{
   width: 100%;
   white-space: nowrap ;
 }

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

Answer 1

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

参见示例：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

首先，您需要删除 fa-fw 类，因为它将 text-align：center; 添加到图标。然后，您需要将文本和图标分开，以便更容易定位。

我举例说明了我是如何做到的：JSFiddle。

我改变了你的HTML结构 li ：

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

我还更改了你的CSS li ，并添加了一些用于文本和图标：

li {
  width: 200px;
  border: 1px solid red;
  white-space: nowrap;
  display: block;
}
span {
  display: inline-block;
  width: calc(100% - 30px);
  border: 1px solid blue;
}
i {
  display: inline-block;
  width: 50%;
  text-align: right;
 }

我希望它可以解决你的问题 更新：添加了计算CSS（请参阅我的评论）。

Answer 3

您可以使用JSON_REPLACE将其与float:right;

对齐

＆＃13;

transform: translateY(-100%) !important;

＆＃13;

.container {
  display: inline-block;
  position: absolute;
  width: auto;
  min-width: 350px;
  max-width: 600px;
  padding: 10px 0;
}
ul {
  list-style-type: none;
}
li {
  width: 100%;
  border: 1px solid red;
  white-space: nowrap;
  display: block;
}
span {
  display: inline-block;
  width: calc(100%-30px);
  border: 1px solid blue;
}
i {
  display: inline-block;
  width: 30px;
  text-align: right;
  border: 1px solid green;
  float: right;
  transform: translateY(-100%) !important;
}

＆＃13;

Answer 4

我认为这可能是您要找的。有一些字体很棒为您提供的类，您可以将它们添加到不同的列表标签中以使其内联。

https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/icons-in-a-list

将<span>元素和fontawesome图标放在同一行中

4 个答案: