Question

ok, this problem has been with me for 2 weaks, and now i'm giving up and asking for help

what i need to do is make a new line in a unordered list inside of a div this is what i'm aiming for

Home Contact Us Education

FAQ Stores Services

and with my currnet code i'm getting this

Home Contact Us Education FAQ Stores Services

i have tried methods like float and center but nothing is working

please help me, i'm going to lost hair at this point.... thanks

Answer 1

检查此笔：

http://codepen.io/anon/pen/qabZqm

基本上它是这样做的：

<强> HTML

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Us</a></li>
  <li><a href="#">Education</a></li>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Stores</a></li>
  <li><a href="#">Services</a></li>
</ul>

<强> CSS

li {
  display: inline;
  list-style: none;
}
li:nth-child(4):after {
  content: "\A";
  white-space: pre;
}
/* tag within the li for styling purposes */
li a {
  display: inline-block;
  margin: 10px;
}

with：nth-child（4）我添加一个伪元素来创建一个中断（\ A）。 li中的A标签是添加一些样式（因为显示内联LI不能用边距等样式......）......我认为这是一个菜单:-)

how to split a unordered list into two in html and css

1 个答案: