如何使用CSS在“内联”中显示数据？

Question

我有锚标记列表：

<a href="#withTagEle"><i 
  class="fa fa-male"></i></span> 10.58.1D.50.1F.FB
  <button class="btn-xs pull-right showOnHover viewInfoOfElement">View</button> 
  <button class="btn-xs pull-right showOnHover editElementInfo">Edit</button>
</a>

如下所示：

但是一些锚点的名字很长，所以看起来像这样：

我需要像第一张图片一样格式化它们。 （注意：我不使用<li>元素）

Answer 1

请修复您的HTML，不要在锚标记中添加按钮...相反，我已为您修复了它，请尝试这样做。

HTML：

<div class="outer-container">
    <a href="#withTagEle"><i class="fa fa-male"></i></span> 10.58.1D.50.1F.FB</a>
    <div class="inner-container">
      <button class="btn-xs pull-right showOnHover viewInfoOfElement">View</button> 
      <button class="btn-xs pull-right showOnHover editElementInfo">Edit</button>
    </div>
</div>

CSS：

.outer-container::after {
  content: "";
  display: table;
  clear: both;
}

.outer-container > .inner-container {
  float: right;
}

.outer-container > a {
  float: left;
}

链接到小提琴：https://jsfiddle.net/g136vw08/

Answer 2

我不知道您的span标签如何

<a href="#withTagEle"><i 
  class="fa fa-male"></i></span> 10.58.1D.50.1F.FB
  <button class="btn-xs pull-right showOnHover viewInfoOfElement">View</button> 
  <button class="btn-xs pull-right showOnHover editElementInfo">Edit</button>
</a>

这是新的HTML，希望此代码与您一起使用

HTML

<a class="content" href="#withTagEle">
<i class="fa fa-male"></i><span> 10.58.1D.50.1F.FB</span>
<button class="btn-xs pull-right showOnHover viewInfoOfElement">View</button> 
<button class="btn-xs pull-right showOnHover editElementInfo">Edit</button>
</a>

CSS

a.content {
    display: flex;
    justify-content: space-between;
}
button.btn-xs.pull-right.showOnHover.viewInfoOfElement {
    margin-left: auto;
    margin-right: 3px;
}

Answer 3

如果不起作用，请发表评论。

a {
    display: flex; 
    text-decoration:none;
}
.btn-xs{
    margin-left: 3px;
    margin-right: 3px;
    cursor:pointer;
}

<a href="#withTagEle">
	<i class="fa fa-male"></i>
	<span>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </span>
	<button class="btn-xs pull-right showOnHover viewInfoOfElement">View</button>
	<button class="btn-xs pull-right showOnHover editElementInfo">Edit</button>
</a>