元素不会显示在同一行上

Question

我尝试使用display: inline-block；来获取同一行上的元素，但它一直向下移动。我试着使用边距来调整位置，但那会使响应的web功能变得混乱。下面是它现在的样子：

​

下面是它应该是什么样子：

​

到目前为止我的代码如下：

​

#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 -->

​

Answer 1

对每个元素使用float left，或者使用ul使其内联使用ul li { display: inline；}