Demo Fiddle

Question

我有一个标题在左边，标题在右边，按钮可以是一个，两个或三个添加的dinamically，并且可以像或按钮或输入按钮链接，如果你看到这个代码与firefox按钮重叠，与chrome和资源管理器按钮对齐是错误的

CSS：

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;
}
#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;
}
#title div {
float : right;
margin-top : -22px;
margin-right : 30px;
}
.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;
   }

HTML：

 <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>

jsfiddle：http://jsfiddle.net/zL4P6/

Answer 1

您必须在某些方面更改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>

<强> CSS

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;
}

Fiddle

参见我在上面的代码

中提到的评论更改

Answer 2

有一种更清晰，更合乎逻辑的实现方法，请参阅下面的HTML / CSS。

Demo Fiddle

HTML

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

CSS

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;
}

顶栏按钮坏css定位浮动权

2 个答案:

Demo Fiddle