Question

尝试用HTML和CSS练习手风琴。

代码如下，以及jsfiddle链接。

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

提前致谢！

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）。因此，您的内容将从父母（项目）的左侧位置开始。

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

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

<强> Fiddle

Accordion HTML + CSS

1 个答案: