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

Question

Making a dialog box with options to choose from, but when the text in the buttons is too long they stack beneath each other.制作一个包含可供选择的选项的对话框，但是当按钮中的文本太长时，它们会相互堆叠。 I need it to stay next to each other (and maybe also extent beyond the width of the dialog box).我需要它彼此相邻（并且可能超出对话框的宽度）。 Have tried different displays and floats but can't get anything to change...尝试了不同的显示器和浮动，但无法改变任何东西......

I want it to look like this (I left out the CSS in this post so don't pay attention to that):我希望它看起来像这样（我在这篇文章中省略了 CSS，所以不要注意它）：

image of how I want it to look我希望它看起来如何的图像

Also: HAVE to use jQuery as it's for a school project...另外：必须使用 jQuery 因为它用于学校项目......

The HTML: 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>

And the JavaScript / jQuery:和 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

Do you want something like this?你想要这样的东西吗？ I added a white-space: nowrap css property to the button text.我在按钮文本中添加了一个white-space: nowrap css 属性。

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-10-31 14:17:21

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-10-31 14:17:21

解决方案1
0 已采纳 2019-10-31 14:17:21