爲什麼我的列表項歪斜？

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像素的自然間距。有一些竅門可以糾正這一點，但在我看來，如果你想要的元素觸摸你更好的使用float