为什么是文本对齐：正确;不正常工作？

我新的用户界面或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

为什么是文本对齐：正确;不正常工作？

回答

相关问题