Question

我遇到了并排正确对齐按钮的问题。我需要在不使用float资源的情况下构建解决方案。看到它：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Documento sem título</title>
        <style type="text/css">
            * {
                margin:0px;
                padding:0px;
            }
            a {
                display:inline-block;
                padding: .63em;
                border:1px solid #ccc;
                position:relative;
            }
            .b2 {
                padding: .0em 1em .0em 2.1em;
                text-decoration:none
            }
            .icon {
                position:absolute;
                width:16px;
                height:16px;
                background-color:#999;
                top:50%;
                margin-top:-8px;
                left:2px;
            }
        </style>
    </head>

    <body>
        <div style="background-color:#f0f0f0; margin-top:50px; position:relative; height:22px; padding:4px;"> <a href="#"><span class="icon"></span></a>

            <div style="display:inline-block; width:2px; height:22px; background-color:#666;"></div> <a href="#"><span class="icon"></span></a>
 <a href="#" class="b2"><span class="icon"></span><span>Casa d wqe dde qeasd sd</span></a>

        </div>

<h2 style="background:#999"> test</h2>

<a href="#" class="b2"><span class="icon"></span><span>Casa d wqe dde qeasd sd</span></a>

    </body>

</html>

Answer 1

在此尝试：

div .b2 {
    top:-6px;
}

Demo

Answer 2

使用无序列表项怎么样？看到这个jsFiddle：jsFiddle

使用CSS属性将其设置为内联：

li {
list-style:none;
display:inline;
}

如何在不使用浮动的情况下修复按钮位置

2 个答案: