Question

我在IE11，Chrome，Firefox下面的代码段中出现了布局错误 - 第二个按钮与第一个按钮没有正确内联。

只要在第二个按钮的内部跨度中添加任何非空白内容，问题就会消失。

是否有一个CSS修复程序会使按钮内联而不需要实际内容，理想情况下不会更改其余的CSS？

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>
.mainBorder { padding: 20px; background-color: #254669 }
    
button {
    font-family: Verdana;
    font-size: 13px;
    color: white;
    position: relative;
    padding: 0 8px 1px 8px; 
    height: 24px;
    background-color: #254669;
    border: 1px solid #53779D;
    transition: all 150ms ease-out;
    outline: none;
}

button:disabled {
    opacity: 0.65;
}

button:enabled {
    cursor: pointer;
}

button:hover:enabled {
    background-color: #53779D;
}

button:active:enabled > span.content {
    display: inline-block;
    transform: translateY(-1px);
}

button:focus {
    border-color: white;
}    

button.iconButton {
    width: 24px;
    padding: 0;
}

span.icon {
    display: block;
    height: 16px;
}
</style>
</head>
<body>
    <h1>Button</h1>
    <div class="mainBorder">
        <button><span class="content">Default</span></button>&nbsp;&nbsp;&nbsp;
        <button class="iconButton"><span class="icon"></span></button>&nbsp;&nbsp;&nbsp;
    </div>
</body>
</html>

＆＃13;

Answer 1

只需将vertical-align：middle添加到按钮栏中，如下所示： Demo

button {
    font-family: Verdana;
    font-size: 13px;
    color: white;
    position: relative;
    padding: 0 8px 1px 8px;
    height: 24px;
    background-color: #254669;
    border: 1px solid #53779D;
    transition: all 150ms ease-out;
    outline: none;
    vertical-align:middle; /* added this */
}

Answer 2

您需要添加

display: table-row;
vertical-align: middle;

在button和

中

box-sizing: border-box;
display: table;

.mainBorder类

中的

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>

.mainBorder {
    background-color: #254669;
    box-sizing: border-box;
    display: table;
    padding: 20px;
    width: 100%;
}
    
button {
    background-color: #254669;
    border: 1px solid #53779d;
    color: white;
    display: table-row;
    font-family: Verdana;
    font-size: 13px;
    height: 24px;
    outline: medium none;
    padding: 0 8px 1px;
    position: relative;
    transition: all 150ms ease-out 0s;
    vertical-align: middle;
}
  
button:disabled {
    opacity: 0.65;
}

button:enabled {
    cursor: pointer;
}

button:hover:enabled {
    background-color: #53779D;
}

button:active:enabled > span.content {
    display: inline-block;
    transform: translateY(-1px);
}

button:focus {
    border-color: white;
}    

button.iconButton {
    width: 24px;
    padding: 0;
}

span.icon {
    display: block;
    height: 16px;
}
</style>
</head>
<body>
    <h1>Button</h1>
    <div class="mainBorder">
        <button><span class="content">Default</span></button>&nbsp;&nbsp;&nbsp;
        <button class="iconButton"><span class="icon"></span></button>&nbsp;&nbsp;&nbsp;
    </div>
</body>
</html>

＆＃13;

Answer 3

如果你打算在元素之间留有空格，我建议没有所有的空格，因为有时很难管理，但是如果你想保持它相同的标记这个css为.iconButton：

button.iconButton{
    width: 24px;
    top: 7px;
    padding: 0;
}

但是如果你想摆脱这些空间，那么你可以选择空格肯定会影响布局

button.iconButton{
    width: 24px;
    top: 3px;
    padding: 0;
    margin: 0 15px;
}

CSS布局错误与按钮和空的内容

3 个答案: