如何获得jQuery对话框按钮以扩展到对话框之外并彼此相邻显示？

Question

使对话框具有可供选择的选项，但是当按钮中的文本太长时，它们会相互堆叠。我需要它保持彼此相邻（并且可能还超出对话框的宽度）。尝试过不同的显示和浮动，但无法进行任何更改...

还：必须在学校项目中使用jQuery ...

HTML：

<button id="click-button4">Attack</button>

<div id="dialog4">
    <p>Which attack do you want to use?</p>
</div>

和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();
        });
    });

Answer 1

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

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