如何让 jQuery 对话框按钮超出对话框并彼此相邻显示？答案

【问题标题】：How to get jQuery dialog buttons to extend beyond the dialog box and displayed next to each other?如何让 jQuery 对话框按钮超出对话框并彼此相邻显示？
【发布时间】：2019-10-31 13:45:53
【问题描述】：

制作一个带有选项的对话框，但当按钮中的文本太长时，它们会相互堆叠。我需要它彼此相邻（并且可能超出对话框的宽度）。尝试了不同的显示器和浮动，但无法改变任何东西......

我希望它看起来像这样（我在这篇文章中省略了 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();
        });
    });

【问题讨论】：

您能否在您的 html 中为 dialog 导入添加 script 和 link 标签？

标签： javascript jquery html button dialog

【解决方案1】：

你想要这样的东西吗？我在按钮文本中添加了white-space: nowrap css 属性。

Jsfiddle：https://jsfiddle.net/Ln9rbs4c/1/

【讨论】：

我添加了一张我希望它现在看起来如何以进行澄清的图像。我尝试了您的解决方案，但遗憾的是没有为我这样做，所以我希望我现在更清楚
啊好吧，我看看我能做什么
等一下，抱歉，它确实有效，我只需要将代码放在其他地方！仍然是编程新手。非常感谢！
哦，没问题