<li>在<ul>内部与display:inline-block错位

时间:2015-09-03 11:28:12

标签: html css

我是css中的菜鸟。我在<li>内有display:inline-blockul<div class="col-md-10 pa-zero ng-scope"> <ul style="border:1px solid blue"> <li class="breadCrumb" style="font-size: 1.000em;margin-right:5px"> <span class="pa-apply-font">Raw Materials : rm- </span> </li> <li class="breadCrumb" style="font-size: 1.000em; margin-right: 5px"> <div> <button style="border: none; background-color: inherit;">Formulas (3)</button> </div> </li> </ul> ,每个内部都有不同的元素。并且它们未对齐.Below给出的是我试过的代码。

ul

Here是说明问题的小提琴。

我希望它们位于ul内的同一行中,其中在我尝试的代码中,它们在 /** * Get Project for parameter,<br /> * * * @ApiDoc( * resource = true, * description = "Get projects by parameters", * output = "Artel\ProfileBundle\Entity\Project", * statusCodes = { * 200 = "Returned when successful", * 404 = "Returned when the Dream is not found" * }, * section="All Projects" * ) * * * RestView() * * @QueryParam(name="status", strict=true, requirements="[a-z]+", description="status of project", nullable=true) * @QueryParam(name="skill", strict=true, requirements="^[a-zA-Z ^0-9().,+]+", description="skill of project", nullable=true) * @QueryParam(name="close", requirements="\d+", description="project by close") * @QueryParam(name="main_skill", strict=true, requirements="^[a-zA-Z ^0-9().,+]+", description="project by main_skill", nullable=true) * @QueryParam(name="count", requirements="\d+", default="10", description="Count project at one page") * @QueryParam(name="page", requirements="\d+", default="1", description="Number of page to be shown") * @QueryParam(name="sort_by", strict=true, requirements="^[a-zA-Z]+", default="created", description="Sort by", nullable=true) * @QueryParam(name="sort_order", strict=true, requirements="^[a-zA-Z]+", default="DESC", description="Sort order", nullable=true) * * @param ParamFetcher $paramFetcher * @return View * * @throws NotFoundHttpException when not exist */ public function getProjectsAction(ParamFetcher $paramFetcher) { $manager = $this->getDoctrine()->getManager(); $repository = $manager->getRepository('ArtelProfileBundle:Project'); if (!$paramFetcher->get('status') && !$paramFetcher->get('main_skill') && !$paramFetcher->get('close') && !$paramFetcher->get('skill')) { $queryBuilder = $manager->getRepository('ArtelProfileBundle:Project')->findAllProject($paramFetcher); } if($paramFetcher->get('main_skill')) { $queryBuilder = $manager->getRepository('ArtelProfileBundle:Project')->findForMainSkillProject($paramFetcher); } if($paramFetcher->get('close')) { $queryBuilder = $manager->getRepository('ArtelProfileBundle:Project')->findForCloseProject($paramFetcher); } if($paramFetcher->get('status')) { $queryBuilder = $manager->getRepository('ArtelProfileBundle:Project')->findForStatusProject($paramFetcher); } if ($paramFetcher->get('skill')) { $queryBuilder = $manager->getRepository('ArtelProfileBundle:Project')->findForSkillProject($paramFetcher); } $projectAll = $queryBuilder[1]; $paginator = $this->get('paginator'); $pagination = $paginator->getPaginated( $paramFetcher->get('count'), $paramFetcher->get('page'), $paramFetcher->get('sort_by'), $paramFetcher->get('sort_order'), $projectAll ); $projectResponse = new ProjectResponse(); $projectResponse->setProjects($queryBuilder[0]); $projectResponse->setCount($pagination->getCount()); return $projectResponse; } 内的不同行中对齐。你能帮我解决一下。

2 个答案:

答案 0 :(得分:2)

inline-block元素的默认对齐方式为baseline

尝试使用

vertical-align:top

JSfiddle Demo

答案 1 :(得分:0)

你也可以尝试这个CSS。请检查此链接https://jsfiddle.net/dgxhs573/

.col-md-10 ul li {
  float: left;
}
.col-md-10 ul {
  display: inline-block;
}