Question

我有一个简单的嵌套列表：

ul {
	width:100px;
    list-style-position: outside;
}
ol {
	width:100px;
    list-style-position: outside;
}

<ul class="b">
  <li>Earl Grey Tea - A fine black tea</li>
  <ul class="b">
    <li>Jasmine Tea - A fabulous "all purpose" tea</li>
    <ol class="b">
      <li>English breakfast Tea - A fabulous "all purpose" tea</li>
    </ol>
  </ul>
  <li>Honeybush Tea - A super fruity delight tea</li>
</ul>

我想在封闭的项目符号的文本下对齐嵌套的项目符号/数字。

那就是我希望'Jasmine Tea'之前的 bullet 在上面的'Earl Grey'的'E'下排列，以及'英式早餐的 1号 '在'茉莉花茶'的'J'下对齐

如何实现这一目标？

（注意：我正在使用list-style-position: outside正确对齐包裹的行，我需要）

Answer 1

列表标记位于列表的左侧填充内。因此，这就是您想要调整的内容：

＆＃13;

ul, ol {
  padding-left: 1em;
}

＆＃13;

<ul class="b">
  <li>Earl Grey Tea - A fine black tea</li>
  <ul class="b">
    <li>Jasmine Tea - A fabulous "all purpose" tea</li>
    <ol class="b">
      <li>English breakfast Tea - A fabulous "all purpose" tea</li>
    </ol>
  </ul>
  <li>Honeybush Tea - A super fruity delight tea</li>
</ul>

＆＃13;

我选择1em的值与字体大小相关，因此您很有可能将列表大致放在所需的位置。根据所选的字体（和标记），您可能需要稍微调整此值以适合您的特定情况。

另请注意，您不需要list-style-position: outside，outside is the default。

Answer 2

<ul class="b">
  <li>Earl Grey Tea - A fine black tea</li>
  <ul class="nudge">
    <li>Jasmine Tea - A fabulous "all purpose" tea</li>
    <ol class="small-nudge">
      <li>English breakfast Tea - A fabulous "all purpose" tea</li>
    </ol>
  </ul>
  <li>Honeybush Tea - A super fruity delight tea</li>
</ul>

julia> function f(x)
         function g(x)
           x^2
         end
         x * g(x)
       end

f (generic function with 1 method)

julia> f(2)
8

julia> f.g(2)
ERROR: type #f has no field g
 in eval_user_input(::Any, ::Base.REPL.REPLBackend) at ./REPL.jl:64
 in macro expansion at ./REPL.jl:95 [inlined]
 in (::Base.REPL.##3#4{Base.REPL.REPLBackend})() at ./event.jl:68

Answer 3

你想让浏览器默认填充左边的所有子ol和ul与外面的位置一致

ul {
	width:100px;
    list-style-position: outside;
}
ol {
	width:100px;
    list-style-position: outside;
}
ul ul, ol ol, ul ol, ol ul {
    padding-left: 1em;
}

<ul class="b">
  <li>Earl Grey Tea - A fine black tea</li>
  <ul class="b">
    <li>Jasmine Tea - A fabulous "all purpose" tea</li>
    <ol class="b">
      <li>English breakfast Tea - A fabulous "all purpose" tea</li>
    </ol>
  </ul>
  <li>Honeybush Tea - A super fruity delight tea</li>
</ul>

Answer 4

如果我理解这个问题，我不是100％确定，但如果你想要对齐，我会删除padding-left-none。我会添加一个名为padding-left: 0px;的辅助类，然后给该类<ul class="b padding-left-none"> <ol class="b padding-left-none">。

HTML

.padding-left-none {
  padding-left: 0px;
}

CSS

public static void main (String args []){
if (0 < args.length) { 
     File inFile = new File(args[0]); // Make sure the file exists, can read, etc...
     while (!inFile.exists()) {
      Scanner console = new Scanner (inFile);
      System.out.println ("Input file:"); //prompt user to input file
         String inFileName = console.nextLine();
         System.out.println ("Input file:"); //prompt user to input file
         inFileName =inFileName.trim(); //get rid of whitespace
           System.out.println(inFileName);
         inFile = new File (inFileName);
      }

CSS对齐嵌套列表

4 个答案:

HTML

CSS