Search code examples
htmlcsswechat

How to let the two line in one line?

I am writing a little-program, and there is a problem I do not understand:

enter image description here

Look at this, I want the two line text in one line, and the “取消” in the right of "请输入您要查询的文本", they are parallel.

How to do with it?

My code is here, in search.wxml:

<view class="search">
<view class="section">
    <input placeholder="请输入您要查询的文本" auto-focus/>
    <navigator class="navigator" url="../../index">取消</navigator>
</view>
</view>

The search.wxss:

.search .section {
    height: 90rpx;
    background-color: #eac627;
}

My project navigation is the picture show:

enter image description here

I think I should make a fuss about search.wxss, but do not know how to do with that.

Solution

  • Refer to vivekkupadhyay's usful comment, I use wxss selector to get that:

    #input-word {
  display:inline-block;
}

#cancel-button {
  display:inline-block;
  width:120rpx;
  float:right;
}

    Thanks again!