爲什麼是文本對齊：正確;不正常工作？

我新的用戶界面或web開發。我想作簡單的簡單網頁。所以我採取http://ionicframework.com/getting-started/頁面。而試圖讓同在我的演示應用site.but我面臨的一個。我做一點相同問題。對頭部有搜索欄（在本文前面輸入域「有問題嗎？頭部到我們的社區論壇與他人使用的框架聊天。」）。我需要在給定文本的前搜索領域。我已經使用text-align：right; 這裏是我的代碼 http://jsfiddle.net/oLws3fsk/1/爲什麼是文本對齊：正確;不正常工作？

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
<div> 
    <div class="header"> 
     <ul class="navbar"> 
      <li><a href="#">product</a></li> 
      <li><a href="#">Getting Started</a></li> 
      <li><a href="#">docs</a></li> 
      <li><a href="#">showcase</a></li> 
      <li><a href="#">forum</a></li> 
      <li><a href="#">Blog</a></li> 
     </ul> 
    </div> 
    <div class="container"> 
     <h1>Getting Started with Ionic</h1> 

     <p>Build mobile apps faster with the web technologies you know and love</p> 
     <div class="smallheader"> 
      <div class="col-sm-8 news-col">Questions? Head over to our <a href="http://forum.ionicframework.com/">Community Forum</a> to chat with others using the framework. 
      <div class="search-bar" style="visibility: visible;"> 
    <span class="search-icon ionic"><i class="ion-ios7-search-strong"></i></span> 
    <input type="search" id="search-input" value="Search"> 
</div> 
      </div> 

     </div> 
    </div> 
</div>

來源

2015-04-03 Shruti

'顯示：直列block'將保持在流（即，旁邊的文字）。例如：http://jsfiddle.net/oLws3fsk/2/ – Moob 2015-04-03 17:32:12

除了我的回答如下，我也覺得這不是一件容易的事你做一個整個網站與您當前的CSS知識。看起來像Ionic框架是相當龐大和複雜的，也許github.com/dhg/Skeleton是一個更好的選擇。這是非常小，更容易上手。那麼，這只是我的想法，你應該檢查功能，看看它是否適合你的項目。 – Stickers 2015-04-04 01:26:59

的div是塊級元素，因此除非你告訴他們，否則都上一個新行。

你可以使用display:inline-block呈現搜索框內嵌（即，旁邊的文字）：

.smallheader .search-bar { 
    display:inline-block;/* display inline so it remains in the flow */ 
    border :1px solid green; 
}

http://jsfiddle.net/oLws3fsk/2

或浮動搜索框右邊：

.smallheader .search-bar { 
    float:right;/* float to the right */ 
    border :1px solid green; 
} 
.smallheader:after {/* clear the float so that the parent does not collapse */ 
    content: ""; 
    display: table; 
    clear: both; 
}

http://jsfiddle.net/oLws3fsk/3/

釷這不是唯一的解決方案。您可以改爲使用absolute positioning，table-layout或flexbox。

來源

2015-04-03 17:41:32 Moob

爲什麼是文本對齊：正確;不正常工作？

回答

相關問題