Создание диалогового окна с вариантами выбора, но когда текст в кнопках слишком длинный, они складываются друг под другом. Мне нужно, чтобы он оставался рядом друг с другом (и, возможно, также выходил за пределы ширины диалогового окна). Пробовал разные дисплеи и плавающие объекты, но не могу ничего изменить ...
Я хочу, чтобы это выглядело так (я пропустил CSS в этом посте, поэтому не обращайте на это внимания):
изображение того, как я хочу, чтобы оно выглядело
Также: ДОЛЖЕН использовать 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();
});
});