Question

我正在尝试创建一个特定宽度为50％的<ul>列表，它应该并排显示，但出于某种原因，如果我有更多文本（超过1行），它会将边距设置为第二个李的顶部。请看下面的截图..

以下是我目前的代码..

        .checklist {
          list-style-type: none;
          display:block !important;
          margin:0;
          padding:0;
        }
        .checklist li {
            margin-bottom:4px;
            width: 40%;
            margin-top:0 !important;
            display:inline-block;
            padding:0;
            margin:0;
        }
        .checklist .icon-holder {
            margin-top:1px;
            background:#444;
            font-size:11px;
            line-height:11px;
            color:#fff;
            width:65px;
            height:50px;
            text-align:center;
            vertical-align:middle;
            float:left;
            display: table;
        }
        .icon-holder i {
            display: table-cell;
            vertical-align:middle;
        }
        .item-content {
            margin-top:0 !important;;
            margin-left:80px;
        }
        .item-content h3 {
            margin:0;
        }

这里是jsFiddle：https://jsfiddle.net/92458m8v/

Answer 1

内联元素的默认垂直对齐方式是基线（这是您正在查看的内容）。通过将vertical-align:top添加到您的列表项规则来更改它：

.checklist li {
    margin-bottom:4px;
    width: 40%;
    margin-top:0 !important;
    display:inline-block;
    padding:0;
    margin:0;
    vertical-align:top;
}

<强> jsFiddle example

Answer 2

您可以将vertical-align设置为<li>以调整inline职位

<强> CSS

.checklist li {
   margin-bottom:4px;
   width: 40%;
   margin-top:0 !important;
   display:inline-block;
   padding:0;
   margin:0;
   vertical-align: top;
}

<强> DEMO HERE

在顶部列出<ul>位置

2 个答案: