html - 在两个按钮之间放置一个 div

Question

我正在尝试使用带有一些按钮的 Remote ，以及一个包含两个按钮之间正在播放的信息的 div。

但它不起作用。

如您所见，在实际的 ipad 上，它呈现不同，我不知道如何修复它。

html:

<div id="buttons">
<button id="prev" class="control" onmousedown="skip('prev')"></button>
    <div id="info"> gfegrbhthehrerhg</div>
<button id="next" class="control" onmousedown="skip('next')"></button><br />


<button id="rwd" class="control" onmousedown="changeSpeed(-2)"></button>
<button id="stop" class="control" onmousedown="emitCommand('stop')"></button>
<button id="play" class="control" onmousedown="emitCommand('play: loop: true speed: 100')"></button>
<button id="ffwd" class="control" onmousedown="changeSpeed(2)"></button>

CSS:

button.control {
    display: inline-block;
    width:150px;
    height:150px;
    background-size: 150px 150px;
    border:0;
    margin: 0.5%;
}

div#info {
    width:300px;
    height: 150px;
    margin: 0 1.1%;
    position: relative;
    top: -58px;
    margin-bottom: -50px;
    border:1px solid red;
    display: inline-block;
}

button#prev {
    margin-left: 160px;
}

button#rwd {
    margin-left: 160px;
}


#buttons {
    margin: 0 auto;
    border: 1px solid lightgray;
}

我做错了什么？完成此任务的正确方法是什么？谢谢

Answer 1

添加

vertical-align: top; 到 div#info

同时从 div#info 中删除 top: -58px;

这是一个工作示例的链接:EXAMPLE LINK