Question

我想在我的网站上做一个注意到滚动的部分，但我也希望它能够响应，但我不能，因为我无法为我的列表项分配固定的。我想知道是否有人知道如何实现这一目标，以便在我的文章中留下一个通知，并使用百分比显示其旁边的其他通知，以使其响应！...生病了小提琴大豆，你可以看到我想做什么。我将感激你的帮助。

http://jsfiddle.net/xtatanx/GPDn4/

html **

<article>
<ul id="slide">
    <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
            <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
            <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
            <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
</ul>
</article>

css *

html,body
{
    font-size: 100%;
}

p
{
    font-size: 16px;
}
article
{
    background: rgba(0, 0, 0, .4);
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 2em;
}

article ul
{    
    margin:0;
    padding:0;
}

article ul li
{    
    width: 100%;
    height: auto;
    display: inline-block;
    margin:0;
    padding:0;
}

h1
{
    font-size:2em;
    text-transform:uppercase;
}

Answer 1

首先，你不应该在<p>标签内使用li - 这在语义上确实不是很好。您可以使用figure来结构化地设置文本，如下例所示：

<ol class="kbarticle">
  <li>
    <figure>
      <a href="#screenshot1"><img src="screen1.jpg" alt="Step 1"></a>
      <figcaption>
        Download the Windows client software <a href="">here</a>.
      </figcaption>
    </figure>
</ol>

其次，您的文字过度运行的原因是因为您的javascript定位到content类，该类已归因于页面上的<li>标记，但文本过度运行容器实际上在<p>个标签内。您还需要定位JavaScript中的<p>代码 - 或者只是设置<p>代码的宽度（http://jsfiddle.net/GPDn4/3/）

响应滚动内容

1 个答案: