Question

I have a little bit of a problem, where I can't get 3 buttons (where 2 of them are <a> Tags and one is a <button> Tag) to act in the same way. My current approach looks like this:

HTML:

<div id="legButtons">
    <p>Legal Information:</p>
    <button id="contactBut" class="ui-btn ui-icon-mail ui-btn-icon-left legalButton" onclick="support()">Contact</button>
    <a id="termsBut" href="#terms" class="ui-btn ui-icon-shop ui-btn-icon-left legalButton">Terms</a>
    <a id="privacyBut" href="#privacy" class="ui-btn ui-icon-lock ui-btn-icon-left legalButton">Privacy</a>
</div>

CSS:

#legButtons {
    margin-top: 10%;
    text-align: center;
}
#legButtons a.legalButton {
    display: inline-block;
    width: auto;
}

#legButtons button.legalButton {
    display: inline-block;
    width: auto;
}

What happens is that the <button> is rendered in a line above the <a> elements. Here an according JSFiddle:

https://jsfiddle.net/g6wexby7/1/

我可以通过向元素添加float: left来解决此问题，但内联块+ text-align: center的整点不再起作用。还有另一种解决方法，同时保持中心对齐吗？

Answer 1

尝试覆盖可能有帮助的下面的课程

.ui-btn {
   overflow: unset;
}

Answer 2

我不确定原因，但是如果从.ui-btn删除/覆盖“overflow：hidden”，它们将会对齐。

Answer 3

删除类名

中的溢出属性

{{1}}

点击<按钮>和<a> act the same way in Jquery Mobile

3 个答案: