Как выровнять два тега привязки в строке li

Question

Я хочу, чтобы два анкерных тега были inline, но второй тег (значок корзины) всегда находится на следующей строке вместо той же строки. Я хочу значок корзины на той же строке, что и имя и значок. Я использую Bootstrap и неон образует

<div class="mail-env"> 
    <div class="mail-env"> 
     <ul class="mail-menu"> 
      <li class="active"> 
       <!--1st a tag --> 
       <a href="<?php echo base_url(); ?>index.php?parents/message/message_read/" style="padding:12px;"> 
        <i class="entypo-dot"></i> 

        <?php echo $this->db->get_where($user_to_show_type, array($user_to_show_type . '_id' => $user_to_show_id))->row()->name; ?> 

        <span class="label label-info"><?php echo $user_to_show_type; ?></span> 
        <span class="badge badge-danger pull-right"> 
         <?php echo $unread_message_number; ?> 
        </span> 
       </a> 

       <!--2nd a tag --> 
       <a href="#" onclick="confirm_modal('<?php echo base_url(); ?>index.php?parent/message/message_delete/<?php echo $row['message_thread_code']; ?>');"> 
        <i class="entypo-trash"></i> 
       </a> 
      </li> 
     </ul> 
    </div> 

Этот вопрос How to align two anchor tags with text horizontally next to each other? не помогло

Я создал jsfiddle слишком https://jsfiddle.net/4jean/mhnq5w99/1/

Answer 1

Оба якоря тегов отображается в виде блоков неона форм .css, поэтому они не могут быть бок о бок:

.mail-env .mail-sidebar .mail-menu > li a { 
    display: block; 
} 

Итак, вы можете изменить его на встроенный блок, например, но это не решит проблему в любом случае из-за структуры html: значок останется внутри первого тега привязки.

Возможно ли изменить html на что-то вроде этого?

<li class="active"> 

    <!--1st a tag --> 
    <a href="#" style="padding:12px;"> 
     <i class="entypo-dot">.</i> 
     Moses Danko 
     <span class="label label-info">Parent</span> 
    </a> 

    <!--2nd a tag --> 
    <a href="#" onclick="confirm_modal('<?php ... ?>');"> 
     <i class="entypo-trash"></i>Del 
    </a> 

    <span class="badge badge-danger pull-right"> 
     2 
    </span> 
</li> 

И CSS для:

.mail-env .mail-sidebar .mail-menu > li a { 
    display: inline-block; 
}