在Zurb Foundation 5.5.3中如何减少之间的边距/填充 <li> 和“缩短” JS插件

Question

我正在CSS上使用Zurb Foundation 5.5.3（并且不希望使用SASS）。 我正在运行Windows7。我正在使用Jquery Shorten显示语言列表https://github.com/viralpatel/jquery.shorten

我正在尝试通过“阿塞拜疆语转录和翻译”来减少最后一个li与后面的“更多”之间的距离。 我未能成功尝试降低边界和填充顶部或底部的目标。

看截图：

我的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（function（）{

$(".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引用了HTML中不存在的元素（例如$(".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的指示进行操作不会清除缓存... ctrl + F5也不起作用