0
所以这里是它看起来像现在:为什么我的列表项歪斜?
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;
}
}
}
}
没有改变任何事情,'vertical-align:top'解决了这个问题,那。很高兴知道'display:inline-block'造成的间距......然后我会用'float'来玩弄游戏。谢谢! – 2014-10-27 05:08:15