顶栏按钮错误css定位向右浮动

我有一个标题栏在左边，按钮在右边，按钮可以是一个，两个或三个手动添加的，并且可以像一个按钮或输入按钮一样链接，如果你看到firefox的代码，按钮重叠，chrome和explorer按钮对齐错误

CSS:

HTML:

标题

jsfiddle：

---

您必须在某些方面更改HTML标记，以实现您想要的任何目标。看，我已经实现了所需的布局。希望对你有帮助

HTML

<div id="title">
    <h2>title</h2>
    <div class="buttons"> <!-- wrapped the html into one div -->
        <div class="button"><a href="#">add</a>
        </div>

        <div class="button"><a href="#">edit</a>
        </div>

        <div>
            <input class="button" type="submit" name="delete_button" value="delete" />
        </div>    
    </div>
    <div class="clear"></div> // Added clearfix to floats
</div>

---

请参阅我在上述代码中提到的带有注释的更改

有一种更干净、更符合逻辑的实现方法，请参阅下面的HTML/CSS

HTML

---

“按钮对齐错误”没有帮助。你需要解释正在发生的事情和你想发生的事情。我建议用photoshopping来显示你想要的图片，而不是在上面重新发布你的代码。也许如果你看到不同浏览器的JSFIDLE，你知道我想要什么。按钮可以是链接按钮样式，也可以是输入类型

 <div id="title">
 <h2>title</h2>
 <div class="button"><a href="#">add</a></div>
 <div class="button"><a href="#">edit</a></div>
 <div ><input class="button" type="submit" name="delete_button" value="delete" />
 </div>

<div id="title">
    <h2>title</h2>
    <div class="buttons"> <!-- wrapped the html into one div -->
        <div class="button"><a href="#">add</a>
        </div>

        <div class="button"><a href="#">edit</a>
        </div>

        <div>
            <input class="button" type="submit" name="delete_button" value="delete" />
        </div>    
    </div>
    <div class="clear"></div> // Added clearfix to floats
</div>

html, body {
    height: 99 %;
    margin: 0;
    padding: 0;
    font - family: Arial, Helvetica, sans - serif;
    font - size: 85 %;
    color: #333399;
}

h2 {
    font-size: 170%;
    margin: 0;
    color: # 333399;
    float: left; /* New property added */
}

#title {
    position: relative;
    width: 70 %;
    background - color: #BAB3D6;
    padding: 10px 0 10px 16px;
    margin - left: auto;
    margin - right: auto;
    margin - bottom: 3px;
    - moz - border - radius - topleft: 10px;
    - webkit - border - top - left - radius: 10px;
    border - top - left - radius: 10px;
    - moz - border - radius - topright: 10px;
    - webkit - border - top - right - radius: 10px;
    border - top - right - radius: 10px;
}

    #title a {
        color: white;
        text - decoration: none;
    }

.buttons { /*  New class added */
    float: right;
}

    .buttons div {
        display: inline - block;
    }

.button {
    background - color: #333399;
    border: 0;
    padding: 6px 20px;
    text-decoration: none;
    color: white;
    cursor: pointer;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

    .button:active {
        text-decoration: none;
        position: relative;
        top: 1px;
    }

.clear { /* new class added */
    clear: both;
}

<div>Title
    <ul>
        <li><a href='#'>Delete</a></li>
        <li><button>Edit</button></li>
            <li><input type='submit' value='Add'/></li>
    </ul>
</div>

body {
    width:100%;
    text-align:center;
}
div {
    background:#BAB3D6;
    display:inline-block;
    border-radius:10px 10px 0 0;
    padding:10px;
    font-weight:bold;
    font-size:18px;
    color:#333399;
    font-family:arial;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
    display:inline-block;
    margin-left:300px;
}
ul li a, ul li button, ul li input[type=submit]{
    color:white;
    text-decoration:none;
    background:none;
    border:none;
    display:inline-block;
    margin:0;
    padding:0;
    cursor:pointer;
    line-height:15px;
    font-size:12px;
    font-weight:bold;
}
ul li {
    display:inline-block;
    color:white;
    font-size:12px;
    background:#333399;
    border-radius:10px;
    padding:5px 10px;
    margin:0 5px;
}