制作一个带有可供选择的选项的对话框，但是当按钮中的文本太长时，它们会堆叠在一起。我需要它彼此相邻(并且可能超出对话框的宽度)。尝试过不同的显示和 float ，但无法进行任何更改...
我希望它看起来像这样(我在这篇文章中省略了 CSS，所以不要注意它):
image of how I want it to look
另外:必须使用 jQuery，因为它是用于学校项目......
HTML:
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button id="click-button4">Attack</button>
<div id="dialog4">
<p>Which attack do you want to use?</p>
</div>
</body>
还有 JavaScript/jQuery:
$("#click-button4").click(function () {
$("#dialog4").css("display", "block");
$(function() {
$("#dialog4").dialog({
buttons: [
{
text: "Use sword",
click: function() {
console.log("Use sword");
}
},
{
text: "Slap him",
click: function() {
console.log("Slap him");
}
},
{
text: "Scream at him",
click: function() {
console.log("Scream at him");
}
},
]
}).dialog("widget").find(".ui-dialog-title").hide();
});
});
最佳答案
你想要这样的东西吗？我向按钮文本添加了 white-space: nowrap css 属性。
Jsfiddle:https://jsfiddle.net/Ln9rbs4c/1/
关于javascript - 如何让 jQuery 对话框按钮扩展到对话框之外并彼此相邻显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58644709/