内联LI与跨度

时间:2016-12-03 22:06:40

标签: html css

我在每个列表项的DIV内的链接旁边有一个名为Delete的按钮。要确认我有另一个按钮,该按钮应显示在名为“确认删除”的旁边。单击它时,它将回发到服务器。删除显示正确,但确认下降到下一行而不是出现在同一行。

来源:

<ul>
    <li>
        <div style="font-size: x-large;">
            <a href="/item/detail/123>Rearden Steel</a> 
        </div>

        <button type="button" name="delete" value="Delete" onclick="ShowDeleteButton('Delete123', this);" class="btn btn-default btn-primary disableOnClickSubmit">Delete</button>

        <span id="Delete123" style="display: none;">
            <form action="/item/ItemDelete" method="post">
                <input id="id" name="id" type="hidden" value="123" />                            
                <button type="submit" name="deleteConfirm" value="DeleteConfirm" class="btn btn-default disableOnClickSubmit">Confirm Delete</button>
            </form>                
        </span>
    </li>
    <li> ... </li>
<ul>

我需要使用哪种样式才能确认删除按钮与链接和删除按钮显示在同一行?

我使用的是Bootstrap 3。

Bootply示例:http://www.bootply.com/VsU984gbLs

1 个答案:

答案 0 :(得分:0)

您只需要执行其中任何一项操作即可使display: inline-block出现在同一行中。

  • <li>:您应该确保float: left s。
  • 之间没有空格
  • pull-left:你应该确保清除花车。

记住上面的警告。由于您使用的是Bootstrap,因此可以使用实用程序类:pull-rightk = exp((H/(R*T))*(T/Tm - 1)); y = ((ad + bd*T)/(1 + k) + (an + bn*T)*k/(1 + k)); 。最好的方法是确保您想要的模式已经存在于框架中并使用标记而不是创建自己的样式。