Question

我想知道是否有人可以帮助我。我试图垂直对齐警报div中的关闭按钮：

无论我怎么尝试，按钮总是太低，即使理论上它应该能够很好地适应div。

这是我的css：

 .btn {
    letter-spacing:1px;
    padding:10px;
    border-radius:3px;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
}
.btn_pri {
    background-color:#479ccf;
    color:#FFF;
}
.btn_pri:hover {
    background-color: #3A8BC0
}
.btn_sec {
    background-color: #fcfcfc;
    color: #479ccf;
    border: 1px solid #e3e3e3;
}
.btn_sec:hover {
    background-color: #EDEDED
}
.btn_close {
    background-color: transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    float: right;
    border:0;
}

我是否需要清除漂浮物或类似物？

Answer 1

只需从按钮中删除边距和填充：

.btn {
    /*
    padding:10px;
    margin-top: 5px;
    margin-bottom: 5px;
    */
}

http://jsfiddle.net/salman/qK3yK/5/

如果按钮需要填充，请使用负边距来定位。添加足够的负边距，以便平衡按钮上的填充和其父级的填充。

.btn {
    padding: 10px;
    margin: -10px -10px -10px 0;
    /*
    padding:10px;
    margin-top: 5px;
    margin-bottom: 5px;
    */
}

http://jsfiddle.net/salman/qK3yK/11/

说完这一切后，我会使用position relative-absolute，因为按钮位于div的底部，这意味着如果警报有两行或更多行，float: right将无法按预期工作。

.alert {
    padding: 15px;
}
.has-btn {
    position: relative;
    /* make room for button */
    padding-right: 40px;
}
.btn {
    /* reset button properties */
    margin: 0;
    border: 0;
    padding: 4px 8px;
    /* set height */
    font-size: 16px;
    line-height: 16px;
    /* set position */
    cursor: pointer;
    position: absolute;
    right: 11px;
    top: 11px;
    /* for testing */
    background-color: #CCC;
}

http://jsfiddle.net/salman/vLjN9/

div中按钮的对齐 - 目前已下降

1 个答案: