简体   繁体   English

为什么text-align:right; 工作不正常?

[英]Why is text-align:right; not work properly?

I am new in UI or web development .I am trying to make simple simple pages .So I take http://ionicframework.com/getting-started/ page .And trying to make same as in my demo application .I make little bit same as site.but i am facing one issue .On header there is search bar (input field in front of this text "Questions? Head over to our Community Forum to chat with others using the framework. ").I need to make search field in front of given text .I already use text-align :right; 我是UI或Web开发的新手。我试图制作简单的简单页面。因此,我选择了http://ionicframework.com/getting-started/ page,并尝试使其与演示应用程序相同。与site相同。但是我面临一个问题。在标题上有搜索栏(此文本前面的输入字段“问题?请转到我们的社区论坛以使用框架与其他人聊天。 ”)。我需要进行搜索给定文本前面的字段。我已经使用text-align:right; here is my code http://jsfiddle.net/oLws3fsk/1/ 这是我的代码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>

Divs are block-level elements and so are presented on a new line unless you tell them otherwise. Div是块级元素,因此除非另有说明,否则它们会换行显示。

You could use display:inline-block to present the searchbox inline (ie, next to the text): 您可以使用display:inline-blockdisplay: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 http://jsfiddle.net/oLws3fsk/2

or float the search box to the right: 或将搜索框浮动到右侧:

.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/ http://jsfiddle.net/oLws3fsk/3/

These are not the only solutions. 这些不是唯一的解决方案。 You could use absolute positioning , table-layout or flexbox instead. 您可以改用绝对定位表格布局flexbox

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM