在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也不起作用