CSS <ul><li> 缩进问题答案

【问题标题】：CSS <ul><li> indent problemsCSS <ul><li> 缩进问题
【发布时间】：2012-11-19 10:30:24
【问题描述】：

我想修改我网站上的无序列表，以便当文本换行到 <li> 中的下一行时，它会根据上面的行缩进。我尝试了许多不同的方法，但似乎没有任何效果。我对 css 没有太多经验，所以我可能只是遗漏了一些简单的东西......

.entry ul li{ list-style:disc inside none !important; 填充：5px 0px }

【问题讨论】：

尝试使用文本缩进代替填充。

标签： html css styles html-lists

【解决方案1】：

这是因为list-style 样式有inside 作为声明的一部分。

取消它，然后调整 margin-left 以将整个列表项推到右侧，然后使用 padding 将文本与列表项项目符号分开。应该这样做：

.entry ul li {
    list-style: disc !important;
    margin-left: 20px;
    padding: 3px 0 0 5px;
}

【讨论】：

【解决方案2】：

它没有正确缩进，因为它不在单行上。请在<li> 中添加<p> 标签，并从左侧填充<p> 标签：

.entry ul li p{
   padding: 0px 0px 0px 10px;
}

【讨论】：

【解决方案3】：

没有“rauberdaniel”那是浪费时间，无论如何我发现为什么我的源代码中的 UL 标签不能与 UL 标签中的 h2 和 h7 一起使用......因为我编辑了所有的 min.css和我的源代码调用的 default.css 类，但它是用于这个下拉菜单的但是....编辑所有 .css 文件夹时我没看到...有一个 menu.js 控制主菜单功能... DUH !!!以为它是（JavaScript）库之一中的通用功能，但肯定在那里......这是我下载和编辑的模板......在源代码调用之后，js代码在下面...... ..

<div id="MainMenu">
<ul id="MegaMenu">
<li>  <h2 class="question">Mechanical</h2>
<div>
<p> ......urthrtfhfthth</p>
</div>

function megaHoverOver(){

  // show effect
  $(this).find(".sub").stop().slideDown();

  // render cufon on headings again (because it wasn't visible before)
  Cufon.replace('#MainMenu h2', { fontFamily: 'Vegur' });

  //Calculate width of all ul's
  (function($) { 
    jQuery.fn.calcSubWidth = function() {
      rowWidth = 0;
      //Calculate row
      $(this).find("ul").each(function() {                  
          rowWidth += $(this).width(); 
      });   
    };

我觉得很愚蠢的 b/ci 花了一个半小时搜索纯 CSS 样式.. 愚蠢的浪费时间....但是它是 (h2)... 现在添加和我添加到的 h7 css 样式 ALLL，因为我希望文本小于描述点的标题，然后单击 HTML 站点中的下拉按钮。

【讨论】：