0

我想在我的网站中做一个部分，其中包含滚动通知，但我也希望它具有响应性，但我不能，因为我无法为我的列表项分配一个固定值。我想知道是否有人知道我如何实现这一点，以便在我的文章中添加一个通知，并使用百分比在其旁边显示其余通知以使其响应！...我会给你一个小提琴大豆你可以看到我在做什么。我会感谢你们的帮助。

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;
}
4

1 回答 1

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>标签内。您还需要<p>在 javascript 中定位标签 - 或者只需为<p>标签设置宽度（http://jsfiddle.net/GPDn4/3/）

于 2013-05-24T21:56:30.300 回答