Question

我有一个场景需要水平显示列表项.... 除了第一个列表项。所有其他项目都具有margin-left属性，但如果列表项目更多，那么它会下降，但不是很好。

以下是plunker链接： Demo

我需要向下的项目（8,9,10）也应该作为第一行元素正确对齐。任何帮助将不胜感激

Answer 1

将first-of-type选择器更改为last-of-type，将margin-left更改为margin-right。在这里检查更新的plunker：

https://plnkr.co/edit/XZDYi37LWZGeU10HvWdC?p=preview

li:not(:last-of-type) {
    margin-right: 40px;
}

Answer 2

申请margin-right

li {
    float: left;
    list-style: none;
    width: 30px;
    height: 40px;
    border: 1px solid black;
    margin-right: 40px;
}

或者对margin-left应用li并尝试ul

的负余量

ul{
    margin-left: -40px;
}
li {
    float: left;
    list-style: none;
    width: 30px;
    height: 40px;
    border: 1px solid black;
    margin-left: 40px;
}

Answer 3

如果public function editAction(Request $request, Projects $project) { $project->setUpdate($project->getFrequency()['update']); $project->setEvery($project->getFrequency()['every']); $project->setOn($project->getFrequency()['on']); $editForm = $this->createForm('AppBundle\Form\ProjectsType', $project); $editForm->handleRequest($request); if ($editForm->isSubmitted() && $editForm->isValid()) { $frequency = array( "update" => $project->getUpdate(), "every" => $project->getEvery(), "on" => $project->getOn() ); $project->setFrequency($frequency); $this->getDoctrine()->getManager()->flush(); return $this->redirectToRoute('projects_edit', array('id' => $project->getId())); } return $this->render('projects/edit.html.twig', array( 'project' => $project, 'edit_form' => $editForm->createView(), 'delete_form' => $deleteForm->createView(), )); }是一个选项，您可以执行此操作 - 在 flex-axis 中放入带有flexbox属性的包装 Flexbox - 请参阅下面的演示和updated plunkr here：

＆＃13;

flex-start

＆＃13;

li {
  list-style: none;
  width: 30px;
  height: 40px;
  border: 1px solid black;
  margin-right: 20px;
  margin-bottom: 10px;
}
ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

＆＃13;

Answer 4

为什么不尝试使用bootstrap。您可以将屏幕/容器的布局分为七个（或任何可配置的屏幕/容器。通常屏幕分为最多12个。）

而不是li，您可以只使用 div 元素来显示项目。

浮动列表：左侧问题

4 个答案: