问题：
当我将jQuery手风琴居中时，它会将下一个段落转移到它的上侧
罗心思
我正试着把手风琴居中。起初，我尝试使用margin:auto；，但它没有居中。然后我用左边试了一下：50%；最高：50%；transform：翻译（-50%,-50%）；并起作用，但我发现有些地方不对。手风琴后面有一段，放在手风琴前面。
null
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.area {
font-size: 20px;
color: red;
text-align: center;
margin: 2% 0;
}
/* ========================== Accordion ==================================== */
.accordion {
position: absolute;
width: 70%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI</title>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.structure.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.theme.css">
</head>
<body>
<p class="area">---------------------------- Accordion ----------------------------</p>
<div class="accordion">
<h2 class="accordion-title">Web Design</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Web Development</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Programming</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Wordpress Development</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Digital Marketing</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
</div>
<p class="area">----------------------------------------------------------------------</p>
<!-- ------------------------- JavaScript Start ---------------------------------------- -->
<script src="./jquery-3.6.0.js"></script>
<script src="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
// --------------------------- Accordion ------------------------------------
$(".accordion").accordion();
});
</script>
<!-- ------------------------- JavaScript End ---------------------------------------- -->
</body>
</html>null
手风琴前后各有一段。但居中后，它们发生在顶部。
我下载了jQuery和jQuery ui文件。jQuery版本:3.6.0和jQuery ui版本:1.12.1。
如何修复此问题？
共有1个答案
楚奇逸
您可以使用css Flex。它会解决你的问题。你所要做的就是用另一个div包装手风琴div。
比如,
<div class="wrapper">
<div class="accordion">
.
.
.
</div>
<div>
在css中
.wrapper{
justify-content: center;
display: flex;
}
.accordian{
width: 70%;
}
请从accordian类中删除所有其他css属性。应该管用。
类似资料：
-
当另一个手风琴打开时，我必须关闭手风琴。我一次只能显示一个手风琴打开。目前，手风琴允许您一次打开多个面板。如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。我只能显示一个。你能帮我吗？
-
问题内容： 我正在使用jQuery手风琴插件来制作一些数据的手风琴。然后，我希望用户能够向手风琴添加更多数据。我已经将手风琴设置为可以正常运行，然后创建了一个函数，该函数为与手风琴语义匹配的手风琴添加了“列表项”。 是否可以“更新”手风琴，使其与新添加的元素一起工作，而无需将新数据保存到数据库并刷新页面？ 像这样： 还是像jQuery 1.3中添加的live事件之类的东西，有人知道吗？ 问题答案：
-
我正在尝试将react bootstrap手风琴绑定到一个传单.js标记上。当点击手风琴，标记将被放大。。。问题是我必须“双击”手风琴才能折叠它并放大标记= **codesandbox演示** https://codesandbox.io/s/react-leaflet-with-imageoverlay-add-remove-markers-dynamically-2tmex 地图容器 手风琴部
-
我正在使用jQuery手风琴来隐藏一些数据。 accordion标题是一个带有一些标题的表格。有一个标题，我不希望你点击它，因为手风琴事件会触发。 所以 手风琴是可折叠的，如果您单击Test2（类nofunction），手风琴事件不应触发。但是如果您单击Test或其他表头，手风琴应该会触发事件。 我可以添加这个功能吗？ 更新测试http://jsfiddle.net/e3Q8d/，包括jQuery
-
我尝试了以下代码，除了图标外，一切都很好。我试图在Google上找到一些解决方案，但我找不到我正在寻找的解决方案。 当我点击其中一个手风琴时，另一个手风琴应该折叠，当前点击的手风琴应该打开，同时fa图标应该根据手风琴的位置而改变。 这是我到目前为止已经尝试过的
-
在index.hpp中，我创建了一个具有多个数据成员的类，如、等。我在类外部定义了一个构造函数。在program.cpp中，我创建了一个名为SAM的对象。当我试图编译它时，它显示错误。什么原因？ Program.cpp index.hpp 错误信息