Question

我希望两个锚标记内嵌，但第二个标记（垃圾图标）始终位于下一行而不是同一行。我希望与名称和徽章位于同一行的垃圾桶图标。我使用bootstrap和neon form

<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

两个锚标签都显示为neon-forms.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;
}

如何对齐内嵌的两个锚标签

1 个答案: