html - 为什么我的列表项是歪斜的？

Question

现在是这样的:

http://imgur.com/XaWsIja,wPmE0PX#0

这是我想要达到的目的(设计证明):

http://imgur.com/XaWsIja,wPmE0PX#1

这里有两个问题我没能解决。 logLeft 和 logRight 之间有这个微小的间隙。我希望这些列表项彼此齐平。另一个问题显然是我不希望 logRight 像那样下降。不过，我没有看到任何东西将它从 logLeft 向下推，所以我很困惑。

这是我的代码:

HTML:

<section id="latestLogs">
<fieldset class="heading"><legend>Latest Logs</legend></fieldset>

<ul>
    <li class="log">
        <ul>
            <li style="background-image: url(/Css/images/temp/stair.jpg);background-position:center;" class="logLeft">
                <h3 class="logTitle">This is the Name of the Log</h3>
                <h4 class="logLoc">East Stairwell</h4>
                <p class="logDesc">This is the description of the log. This is the description of the log. This is the description of the log. This is the description of the log. This is the description of the log. This is the description of the log.</p>
            </li>
            <li class="logRight">
                <p>
                    Wednesday <br />
                    09.23.2015
                </p>
                <ul class="logCharacters">
                    <li>Opera</li>
                    <li>Alexandr</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="log">
        <ul>
            <li style="background-image: url(/Css/images/temp/waterbedroom.jpg);background-position:center;" class="logLeft">
                <h3 class="logTitle">This is the Name of Another Log</h3>
                <h4 class="logLoc">Room 302</h4>
                <p class="logDesc">Some log descriptions are very short.</p>
            </li>
            <li class="logRight">
                <p>
                    Tuesday <br />
                    09.22.2015
                </p>
                <ul class="logCharacters">
                    <li>Brandon (DM)</li>
                    <li>Rikart</li>
                    <li>Diego</li>
                    <li>Vaithen</li>
                    <li>Damocles Iota</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="log">
        <ul>
            <li style="background-image: url(/Css/images/temp/bathroom.jpg);background-position:center;" class="logLeft">
                <h3 class="logTitle">Some Log Descriptions Are Very Long Because People Just Keep Making Obscure References</h3>
                <h4 class="logLoc">10th Floor Womens Restroom</h4>
                <p class="logDesc">Some log descriptions are really long, like he just kept talking in one long incredibly unbroken sentence moving from topic to topic so that no-one had a chance to interrupt; it was really quite hypnotic. Some log descriptions are really long, like he just kept talking in one long incredibly unbroken sentence moving from topic to topic so that no-one had a chance to interrupt; it was really quite hypnotic. Some log descriptions are really long, like he just kept talking in one long incredibly unbroken sentence moving from topic to topic so that no-one had a chance to interrupt; it was really quite hypnotic.</p>
            </li>
            <li class="logRight">
                <p>
                    Monday <br />
                    09.21.2015
                </p>
                <ul class="logCharacters">
                    <li>Rekah</li>
                    <li>Big Ben</li>
                    <li>Fallon</li>
                    <li>Walker</li>
                    <li>Tseng</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="log">
        <ul>
            <li style="background-image: url(/Css/images/temp/lobby.jpg);background-position:center;" class="logLeft">
                <h3 class="logTitle">This Log Title is So Freaking Fabulous</h3>
                <h4 class="logLoc">Lobby</h4>
                <p class="logDesc">I wanted to write a long description, but instead I just copy and pasted this three times. I wanted to write a long description, but instead I just copy and pasted this three times. I wanted to write a long description, but instead I just copy and pasted this three times.</p>
            </li>
            <li class="logRight">
                <p>
                    Sunday <br />
                    09.20.2015
                </p>
                <ul class="logCharacters">
                    <li>Jarrett (DM)</li>
                    <li>Silver</li>
                    <li>Chastity</li>
                    <li>Trusken</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS(实际上是 SASS):

  #latestLogs {
    h3, h4 {
        margin: 0px 0px 0px 0px;
    }
    ul, li {
        list-style-type: none;
        padding: 0px;
    }
    .log {
            display: inline-block;
            li {
                display: inline-block;
            }
    }
    .logLeft {
        height: 300px;
        width: 300px;
        padding: 10px;
        position: relative;
        overflow: hidden;
        .logTitle, .logLoc, .logDesc {
            text-shadow: 3px 3px 2px #000;
        }
        .logDesc {
            display: none;
        }
        .logLoc {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
    }
    .logLeft:hover {
        .logTitle, .logLoc {
            display: none;
        }
        .logDesc {
            display: inline;
            font-weight: bold;
        }
    }
    .logRight {
        display: block;
        height: 300px;
        width: 200px;
        background: rgba(10, 30, 32, .5);
        padding: 10px;
        p {
            margin: 0px 0px 20px 0px;
            color: $gold;
            font-weight: bold;
        }
        .logCharacters {
            color: $teal;
            font-weight: bold;
            li {
                display: list-item;
            }
        }
    }
}

Answer 1

这两个问题似乎都是由于使用 display: inline-block 造成的。首先，您需要包含 vertical-align: top 以纠正侧栏太低的问题。其次，display: inline-block 在元素之间添加了 1 或 2 个像素的自然间距。有一些 hack 可以纠正这个问题，但我认为如果你想让元素接触你最好使用 float