html - Accordion HTML + CSS

Question

尝试练习使用 HTML 和 CSS 创建 Accordion 。

下面是代码和 jsfiddle 链接。

我的问题是，当你点击“关于”时，如何让“Hoho”向左移动。我想如果我添加更多选项卡，它们各自的内容将出现在它们的正下方。我怎样才能让所有内容从左边开始显示？

提前致谢!

https://jsfiddle.net/g2r7jLe0/

HTML

<ul>
  <li>
    <a href="#link">Home</a>
    <p id="link">Shopify’s Theme Design Team recently released a pretty sweet template for Shopify Merchants called Venture. The layout is optimized for the best shopping experience and provides clear focus on the products. While the layout was developed to accommodate several business cases, for this tutorial example we will focus on the core of the layout and recreate it with flexbox. In the following steps, we’ll learn how to center align elements, set perfect sticky footers, provide priority to certain products dependent on viewport and device, target flexbox elements with media queries, and learn the basics about Flexbox so you can start implementing flexbox layouts in your next web project.Shopify’s Theme Design Team recently released a pretty sweet template for Shopify Merchants called Venture. The layout is optimized for the best shopping experience and provides clear focus on the products. While the layout was developed to accommodate several business cases, for this tutorial example we will focus on the core of the layout and recreate it with flexbox. In the following steps, we’ll learn how to center align elements, set perfect sticky footers, provide priority to certain products dependent on viewport and device, target flexbox elements with media queries, and learn the basics about Flexbox so you can start implementing flexbox layouts in your next web project.
    Shopify’s Theme Design Team recently released a pretty sweet template for Shopify Merchants called Venture. The layout is optimized for the best shopping experience and provides clear focus on the products. While the layout was developed to accommodate several business cases, for this tutorial example we will focus on the core of the layout and recreate it with flexbox. In the following steps, we’ll learn how to center align elements, set perfect sticky footers, provide priority to certain products dependent on viewport and device, target flexbox elements with media queries, and learn the basics about Flexbox so you can start implementing flexbox layouts in your next web project.Shopify’s Theme Design Team recently released a pretty sweet template for Shopify Merchants called Venture. The layout is optimized for the best shopping experience and provides clear focus on the products. While the layout was developed to accommodate several business cases, for this tutorial example we will focus on the core of the layout and recreate it with flexbox. In the following steps, we’ll learn how to center align elements, set perfect sticky footers, provide priority to certain products dependent on viewport and device, target flexbox elements with media queries, and learn the basics about Flexbox so you can start implementing flexbox layouts in your next web project.</p>
  </li>
  <li>
    <a href="#link2">About</a>
    <p id="link2">Hoho</p>
  </li>
</ul>

CSS

body, html {
  width: 100%;
  height: 100%;
}

ul {
  list-style-type: none;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  padding: 0;
  display: block;
}

li {
  display: inline-block;
}

p {
  position: absolute;
  opacity: 0;
  transition: all 2s;
  width: 100%;
  padding: 0;
}

li p:target {
  opacity: 1;
}

Answer 1

您确实将内容放入了列表项(li)。所以你的内容会从它们的parents(item)左边的位置开始。

但是，您的段落元素(p) 具有绝对位置，您可以设置绝对左侧位置。

p {
  position: absolute;
  left: 10px; /* set left position to 10px */
  opacity: 0;
  transition: all 2s;
  width: 100%;
  padding: 0;
}

Fiddle