我尝试使用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 -->
答案 0 :(得分:0)
为每个元素使用float left或者使用ul来使其内联使用ul li {display:inline; }