在ZURBFoundation5.5.3中，如何减少<li>和“缩短”JS插件之间的保证金/填充

Question

我在CSS中使用ZURBFoundation5.5.3(而且不希望使用SASS)。我正在运行Windows 7。我使用Jquery来显示语言列表https://github.com/viralpatel/jquery.shorten

我试图缩小最后一个里与“阿塞拜疆抄写和翻译”与以下“更多”之间的空间。我试图降低毛利率和填充顶部或底部，但没有成功.

见截图：

​

我的html代码和css如下所示

​

.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

.reducebottom {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}

.reducetop ul {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

.reducebottom ul {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}


ul.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

ul.reducebottom {
  padding-bottom: 5.75rem;
  margin-bottom: 5.75rem;
}

.reducetop ul li {
  padding-top: -1.75rem;
  margin-top: -1.75rem;

}

.reducebottom ul li {
  padding-bottom: -5.75rem;
  margin-bottom: -5.75rem;
}

li.reducemargin{
margin: 0px;
}

ul.reducemargin { 
  margin:-20px;
}

.reducemargin ul { 
  margin:-20px;
}

.reducemargin ul li { 
  margin:-20px;
}

ul.noindent {
    margin-left: 5px;
    margin-right: 0px;
    padding-left: 10px;
    padding-right: 0px;
}

.imagelist li{
            Padding:0;
            margin:0;
}

      <div class="row"> 
         <div class="small-12 medium-12 columns">
          <h4>more languages</h4> 

          <p>over the years we've worked on audio and video transcription projects involving many other languages including:</p>

            <div class="medium-4 columns">
            <div class="reducetop reducemargin imagelist">
            <ul class="noindent imagelist">
              <li>Albanian transcription and translation</li>
              <li>Amharic transcription and translation</li>
              <li>Arakanese transcription and translation</li>
              <li>Armenian transcription and translation</li>
              <li class="reducemargin noindent imagelist">Azerbaijani transcription and translation</li>           
            </ul>
            </div>
            <div class="reducetop reducemargin">
          <ul class="comment-small reducemargin noindent imagelist">
              <li>Aymara transcription and translation</li>
              <li>Belarusan transcription and translation</li>
              <li>Bengali transcription and translation</li>
              <li>Bhilali transcription and translation</li>
              <li>Burmese transcription and translation</li>
              <li>Cambodian transcription and translation</li>
              <li>Caqchiquel transcription and translation</li>
              <li>Chechen transcription and translation</li>
              <li>Creole transcription and translation</li>
              <li>Dari transcription and translation</li>
              <li>Dinka transcription and translation</li>
              <li>Faroese transcription and translation</li>
              <li>Farsi transcription and translation</li>
              <li>Flemish transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Fulani transcription and translation</li>
              <li>Georgian transcription and translation</li>
              <li>Uzbek transcription and translation</li>
              <li>Greenlandic transcription and translation</li>
              <li>Guarani transcription and translation</li>
              <li>Gujerati transcription and translation</li>
              <li>Hassaniya transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Icelandic transcription and translation</li>
              <li>Inuktitut transcription and translation</li>
           </ul> 
           </div>

         </div> 

          <div class="medium-4 columns comment">
          <ul>
              <li>Albanian transcription and translation</li>
              <li>Amharic transcription and translation</li>
              <li>Arakanese transcription and translation</li>
              <li>Armenian transcription and translation</li>
              <li>Azerbaijani transcription and translation</li>
              <li>Aymara transcription and translation</li>
              <li>Belarusan transcription and translation</li>
              <li>Bengali transcription and translation</li>
              <li>Bhilali transcription and translation</li>
              <li>Burmese transcription and translation</li>
              <li>Cambodian transcription and translation</li>
              <li>Caqchiquel transcription and translation</li>
              <li>Chechen transcription and translation</li>
              <li>Creole transcription and translation</li>
              <li>Dari transcription and translation</li>
              <li>Dinka transcription and translation</li>
              <li>Faroese transcription and translation</li>
              <li>Farsi transcription and translation</li>
              <li>Flemish transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Fulani transcription and translation</li>
              <li>Georgian transcription and translation</li>
              <li>Uzbek transcription and translation</li>
              <li>Greenlandic transcription and translation</li>
              <li>Guarani transcription and translation</li>
              <li>Gujerati transcription and translation</li>
              <li>Hassaniya transcription and translation</li>
              <li>Fujianese transcription and translation</li>
              <li>Icelandic transcription and translation</li>
              <li>Inuktitut transcription and translation</li>
           </ul> 

         </div> 
          </div>

          </div>

​

这是我在html中使用的缩短插件脚本。

<script language="javascript">

$(Document).ready(函数(){)

$(".comment").shorten();

$(".comment-small").shorten({
  showChars: 10,
  moreText: 'more',
  lessText: 'less',
  ellipsesText: '...',
});

$(".comment-list").shorten({
  showChars: 10,
  moreText: 'more',
  lessText: 'less',
  ellipsesText: '...',
});

$(".comment-test").shorten({showChars: 30});  

})；

任何帮助都将不胜感激！

Answer 1

在上面的问题中，您有一些代码是多余的(我猜是附加在您站点的其他地方)。

例如：

ul.reducetop {
  padding-top: 1.75rem;
  margin-top: 1.75rem;

}

将类reducetop应用于div (在所示代码中)以及一些jQuery引用不存在于div中的元素(例如，$(".comment-test").shorten({showChars: 30});等)。

因此，为了帮助我回答您的问题，我已经修剪了CSS，JS和HTML与您的问题无关，在特定的专栏中的差距。

HTML

<div class="row">
  <div class="small-12 medium-12 columns">
    <h4>more languages</h4>
    <p>over the years we've worked on audio and video transcription projects involving many other languages including:</p>
    <div class="medium-6 columns end">
      <div class="">
        <ul class="noindent imagelist">
          <li>Albanian transcription and translation</li>
          <li>Amharic transcription and translation</li>
          <li>Arakanese transcription and translation</li>
          <li>Armenian transcription and translation</li>
          <li class="">Azerbaijani transcription and translation</li>
        </ul>
        <ul class="comment-small noindent imagelist">
          <li>Aymara transcription and translation</li>
          <li>Belarusan transcription and translation</li>
          <li>Bengali transcription and translation</li>
          <li>Bhilali transcription and translation</li>
          <li>Burmese transcription and translation</li>
          <li>Cambodian transcription and translation</li>
          <li>Caqchiquel transcription and translation</li>
          <li>Chechen transcription and translation</li>
          <li>Creole transcription and translation</li>
          <li>Dari transcription and translation</li>
          <li>Dinka transcription and translation</li>
          <li>Faroese transcription and translation</li>
          <li>Farsi transcription and translation</li>
          <li>Flemish transcription and translation</li>
          <li>Fujianese transcription and translation</li>
          <li>Fulani transcription and translation</li>
          <li>Georgian transcription and translation</li>
          <li>Uzbek transcription and translation</li>
          <li>Greenlandic transcription and translation</li>
          <li>Guarani transcription and translation</li>
          <li>Gujerati transcription and translation</li>
          <li>Hassaniya transcription and translation</li>
          <li>Fujianese transcription and translation</li>
          <li>Icelandic transcription and translation</li>
          <li>Inuktitut transcription and translation</li>
        </ul>
      </div>
    </div>
  </div>
</div>

(仅一列，删除了一些类，并将一个类应用于相关的ul)

JavaScript / jQuery

$(document).ready(function() {
  $(".comment-small").shorten({
    showChars: 10,
    moreText: 'more',
    lessText: 'less',
    ellipsesText: '...',
  });
}).foundation();

(同样，但随着基金会的初始化呼叫在末尾，并削减到只有一个列表，以“缩短”)

CSS

ul.noindent {
  margin-left: 5px;
  margin-right: 0px;
  padding-left: 10px;
  padding-right: 0px;
}

.imagelist {
  padding: 0;
  margin: 0;
}
.shortcontent,
.morelink {
  float: left;
}

因此，基本上:如果您删除与填充相关的所有css或应用于作为列表的父级和子元素的元素的边距，那么为您的ul元素选择一个类来控制间距(我已经在示例中重用了您的imagelist类)，您可以将边距和填充设置为0(或者您需要的任何内容)。

然后，为了进一步缩小(感知到的)差距(已经为0)，可以使用jQuery.Shortening添加到创建元素的类将省略号和“更多”的span叠加在同一行上：

.shortcontent,
.morelink {
  float: left;
}

如果需要，还可以填充.shortcontent (省略号)以在元素之间创建水平间隔。

下面是一个有用的示例：https://jsfiddle.net/tymothytym/0dvf2gzk/

Answer 2

正如@tymothytym在聊天中澄清的那样，我的部分问题是由于Chrome缓存错误--按照他的建议，我遵循了Chrome WON'T clear cache... ctrl + F5 doesn't seem to work either的指示