为了账号安全,请及时绑定邮箱和手机立即绑定

三个子元素在同一个父元素div下,在保证子元素在同一行的状态下,中间元素宽度自适应。

/ 猿问

三个子元素在同一个父元素div下,在保证子元素在同一行的状态下,中间元素宽度自适应。

weixin_银翼孤狼_0 2018-03-08 11:32:50

响应式页面内,

三个子元素分别是段落、段落、按钮。三个子元素都没有用新的div包裹。

我用display:inline-block让他们保持在同一行内,中间元素宽度只会根据文本内容自适应。我该如何让它填满剩下的父元素空间。

下面是body的代码:

<div id="login-home" style="height:50px; background-color:red; color:grey; font-size:12px; line-height:50px;">

     <p  style="display: inline-block;">2131231231231</p>

    <p style="color:grey; font-size:12px; line-height:50px; text-align:right; display: inline-block;">111111111111111111111111111111111111</p>

     <button style="display: inline-block; height:50px; width:50px; float:right; " >退出</button>

我想让第二个段落右对齐按钮该怎么做


查看完整描述

1 回答

已采纳
?
QQ_随意

最简单就是给第二个段落也float:right; 

<p  style="display: inline-block;">2131231231231</p>
<button style="display: inline-block; height:50px; width:50px; float:right;" >退出</button>
<p style="color:grey; font-size:12px; line-height:50px;display: inline-block;float:right;">111111111111111111111111111111111111</p>


查看完整回答
1 反对 2018-03-08

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信