Question

到目前为止，我有这个：

HTML：

<button>
    <span class="outter">
        <span class="inner">Line A</span>
        <span class="inner">Line b</span>
    </span>
</button>

<button>
    <span class="outter">
        <span class="inner">Line X</span>
    </span>
</button>

CSS：

* {
    box-sizing: border-box;
}

button {
    width: 100px;
    height: 40px;
    background-color: #CCFFCC;
    border: none;
    overflow: hidden;
    border-radius: 5px;
}

button .outter {
    display: inline-block;
    width: inherit;
}

button:active .outter {
    background-color: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.35);
}

button .inner {
    display: inline-block;
    width: inherit;
}

演示： http://jsfiddle.net/Lb3htfmx/2/

但是你可以在演示中看到这个问题。以下是我希望此按钮的行为方式：

按钮需要在它们之间对齐，最好不使用父容器。我不知道为什么第二个按钮会掉线，因为它们是内联元素。
文字未正确对齐中间。我也不知道为什么会这样。如果单击该按钮，您将更清楚地看到问题。
当您单击按钮时，我想要一个阴影，整个按钮背景更暗。我想避免使用不透明度指定深色，我真的想使用某种暗色滤镜（类似于我所做的）。

如何解决这些问题？

Answer 1

1）要对齐按钮，请使用按钮选择器上的vertical-align: top;。

2）要使文字居中，请将.outer元素的宽度设置为width:100%;。

3）要使阴影背景覆盖整个按钮，请将选择器从button:active .outter {...}更改为button:active {...}。

这是一个小提琴：http://jsfiddle.net/cmd3nbz0/

Answer 2

要使这些按钮顶部对齐，您应该设置vertical-align:top，您还应该删除默认的:focus大纲，并查看其他部分的以下演示。

button {
    width: 100px;
    height: 40px;
    background: #cfc;
    border: none;
    border-radius: 5px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}
button span {
    display: block;
}
button:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
button:focus {
    outline: 0;
}
button:active {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.35);
}
button:active:after {
    background: rgba(0, 0, 0, 0.15);
}

<button>
    <span>Line A</span>
    <span>Line b</span>
</button>

<button>
    <span>Line X</span>
</button>

小提琴演示： http://jsfiddle.net/3vh6cuns/

Answer 3

解决了问题：Jsfiddle here

您的问题是，您的按钮显示为inline-block，当它们应display:inline进行垂直对齐时。

垂直对齐的文档here：

你还应该float按钮内的对象，以便让他们进入＆＃34;堆叠＆＃34;

浮动here的文档：

并将button:active .outter .outter更改为button:active

button:active {
  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow: inset 0px 1px 5000px rgba(0,0,0,0.8);
}

排列对齐问题，您不应该使用width:inherit;而是使用width:100%;

Answer 4

我不确定我明白你想要什么。像这样的东西？

JS Fiddle

它有一个父容器，也许它可以在没有它的情况下完成，但我认为这是最好的＆＃34;正确的＆＃34;方式。

＆＃13;

.container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container > button {
    border-radius: 5px;
    border: 2px solid transparent;
    margin: 5px 5px 5px 5px;
    background-color: ocre;
    color: brown;
    transition: all 0.3s;
}
.container > button > span {
    display: block;
}
.container > button:hover {
    border: 2px solid gray;
    color: red;
}
.container > button:focus {
    border-color: black;
    color: red;
    background-color: gray;
    box-shadow: 5px 5px 10px #888888;
    outline: none;
}

＆＃13;

<div class="container">
    <button>
        <span class="inner">Line A</span>
        <span class="inner">Line b</span>
    </button>
    <button> 
        <span class="inner">Line X</span>
    </button>
</div>

＆＃13;

Answer 5

那些在 2021 年尝试此操作的人可能更喜欢在按钮上粘贴“display: flex”，将子 span 元素放在按钮元素内（我刚刚意识到您可以这样做），然后弄乱 Flexbox 设置直到适合恰到好处。

如何创建一个<button>，其中两个堆叠的<span>元素全部居中对齐？

5 个答案: