我尝试使用 display: inline-block;获取同一行上的元素,但它一直向下移动。我尝试使用边距来调整位置,但这会弄乱响应式网络功能。 这是它现在的样子:
到目前为止我的代码:
#header .logo-wrap { padding: 50px 0 50px 0; }
#header p.site-desc {
color: #595959;
font-size: 18px;
line-height: 19px;
text-align-last: right;
width:70%;
padding-top: -5px;
letter-spacing: 4px;
}
#carousel {
position: relative;
display: inline-block;
width:70%;
margin-top: -4px;
}
<div class="logo-wrap">
<div class="container">
<div class="desktop-6 columns">
<h1><a href="index.html" title="Home"><img src="http://i.imgur.com/wobJUCd.png" alt="" /></a></h1>
<!-- // .desktop-6 -->
<p class="site-desc">
Digital media designer<br />
Concept developer<br /><br /><br /><br /><br />
<p style="font-size:75px; line-height:50px; text-align-last: justify; letter-spacing: 3px; color: #595959; font-family: Neusa ExtraBold;">i</p></p>
<div id="carousel">
<div class="btn-bar">
<div id="buttons"><a id="prev" href="#"></a><a id="next" href="#"></a> </div>
</div>
<div id="slides">
<ul>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"
style="font-size:44px; line-height:45px; text-align-last: justify; letter-spacing: 3px; color: #595959; font-family: Neusa ExtraBold;"> minimize,</br>experiment,</br>& make grids</span>
</p>
</div>
</li>
</ul>
</div>
</div></div>
<!-- // .site-desc -->
</div><!-- // .desktop-6 -->
<div class="clear"></div>
</div><!-- // .container -->
</div><!-- // .logo-wrap -->
最佳答案
为每个元素或 ul 使用 float left 使其内联使用 ul li { display:inline;
关于html - 元素不会显示在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40106698/