Question

我使用短划线创建了一个简单的Scanner sc = new Scanner(System.in); System.out.print("Do you want to continue ? y/n ?"); String yesOrNo = sc.next(); System.out.println("Please write your first and last name"); String name = sc.nextLine(); System.out.println("Please write your first and last name"); String name2 = sc.nextLine();来显示ul元素。

Here is the example fiddle：

li未正确对齐：

当前李

-Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Pellentesque cursus，risus eu fringilla blandit ，ante dolor malesuada massa，in rhoncus dui justo sed risus

blandit 应该与Lorem签约。

这是我正在使用的CSS代码

li

Answer 1

你可以在li上使用填充和破折号的绝对定位（并删除文本缩进）：

＆＃13;

ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 15px;
}

li {
  padding-left: 1.2em;    /* amount of space for the dash */
  padding-bottom: 0.1em;
  position: relative;
}

li:before {
  content: "–";
  color: #333;
  position: absolute;
  left: 0;
  top: 0;
}

＆＃13;

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>

＆＃13;

Answer 2

你应该让li padding-left = text-indent 。

例如：

{
   padding-left: .5em; 
   padding-bottom: 0.1em;
   text-indent: -.5em;
}

或者根据需要制作10px

ul {
    list-style-type: none;
    padding:0;
    margin-bottom: 15px;
	 
	  
}

  li { 
    padding-left: 10px; 
    padding-bottom: 0.1em;
    text-indent: -10px;
}

  li:before {
    content: "– ";
    color: #333; 
}

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>

Answer 3

将position: absolute应用于li::before即可。

＆＃13;

ul {
    list-style-type: none;
    padding-left: 10px;
    margin-bottom: 15px;
	 
	  
}

  li { 
    padding-left: 10px;
    
    padding-bottom: 0.1em;
    /*text-indent: -.5em;*/
	 
}

  li:before {
    content: "– ";
    position: absolute;
    left: 10px;
    color: #333; 
 
}

＆＃13;

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>

＆＃13;

CSS：如何在破折号之前使用li正确地对齐li元素

3 个答案: