在 Zurb Foundation 5.5.3 中，如何在 <li> 和“缩短”JS 插件之间减少 margin/padding

Question

我正在使用 Zurb Foundation 5.5.3 和 CSS（并且不想使用 SASS）。我是运行 Windows 7. 我正在使用 Jquery 缩短显示语言列表 https://github.com/viralpatel/jquery.shorten

我正在尝试减少最后一个 "Azerbaijani transcription and translation" 和后面的 "more" 之间的 space。我试图减少边距和填充顶部或底部，但没有成功....

见截图：

我的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">

$(文档).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;

}

其中 class 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>

（只有一栏，删除了一些 class，一栏 class 应用于相关的 ul）

JavaScript / jQuery

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

（相同，但在末尾调用 Foundation 初始化并仅切入一个列表 "shortened"）

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 选择一个 class控制间距的元素（我在示例中重复使用了 imagelist class），您可以将边距和填充设置为 0（或任何您需要的值）。

然后为了进一步减少（感知到的）差距（它已经是 0），您可以使用 classes class 将省略号和 "more" span 堆叠在同一行上 jQuery.Shortening 添加到创建的元素：

.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

的指示

在 Zurb Foundation 5.5.3 中，如何在 <li> 和“缩短”JS 插件之间减少 margin/padding

In Zurb Foundation 5.5.3 how do I reduce margin/padding between <li> and the 'shorten" JS plugin

css

jquery

zurb-foundation

zurb-foundation-5