Как отобразить данные в «встроенных» с помощью 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

Я не знаю, как ваш тэг 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 2

Пожалуйста, оставьте комментарий, если это не работает.

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>

Answer 3

Пожалуйста, исправьте ваш 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/