html - 元素不会显示在同一行

Question

我尝试使用 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 -->

Answer 1

为每个元素或 ul 使用 float left 使其内联使用 ul li { display:inline;