我是UI或Web开发的新手。我试图制作简单的简单页面。因此,我选择http://ionicframework.com/getting-started/页面。并尝试使其与演示应用程序中的页面相同。我与site有点相同。但是我正面临一个问题。在标题上有搜索栏(此文本前面的输入字段“问题?请转到我们的社区论坛以使用框架与其他人聊天。”)。我需要在给定文本的前面添加搜索字段。我已经使用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>
最佳答案
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。