Question

我是UI或Web开发的新手。我正在尝试制作简单的简单页面。所以我采用http://ionicframework.com/getting-started/页面。并尝试在我的演示应用程序中进行相同的操作。我与网站有点相同。但我面临一个问题。在标题上有搜索栏（此文字前面的输入字段＆＃34;问题？请访问我们的社区论坛，与使用该框架的其他人聊天。＆＃ 34;）。我需要在给定文本前面设置搜索字段。我已经使用 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>

Answer 1

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。

为什么是text-align：right;不正常工作？

1 个答案: