Question

当我试图将订阅按钮移动到更高位置时，应该位于左侧文本的中心。

如果我使用display:inline我能够实现我期待的

但我想在display:inline-block

中实现同样的目标

我也用过

宽度：400像素

用于

.panel3 #cont

如果我放大浏览器，文本没有包裹在宽度内：400px，我需要它来响应文本应该在div内部自动分解时缩放。

这里是小提琴http://jsfiddle.net/mohamedmusthafac/gbgB4/10/

HTML

<div class="panel3">
<div id="wrap" style="padding:0.4in">
<div id="button">
    <input type="submit" value="Subscribe"/>
</div>
<div id="cont" align="left">
Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
</div>

</div>
</div>

CSS

.panel3 {
    width:100%;
    min-height:120px;
    background-color: #233247;
    border-top: 5px solid #fff;
    color: white;
}
.panel3 div div {
    display:inline-block;
}
.panel3 #cont {
    font-size: 21px;
    width:400px;
    min-width:100px;
    text-align: left;
    word-wrap:break-word;
    padding-left: 30px;
}
.panel3 #button input[type="submit"] {
    margin: 0px;
    margin-top:-30px;
    min-height: 45px;
    width: 200px;
    border:5px solid #fff;
    border-radius: 5px;
    background-color:#233247;
    color: white;
    font-size: 16px;
}

Answer 1

给

  .panel3 #button { margin-right:30px; }

从

中删除填充

 .panel3 #cont { padding:0px; }

工作链接：http://jsfiddle.net/Husen/gbgB4/5/

此外，您必须为移动设备添加媒体查询才能实现此目的，

  @media (max-width: 767px) {
 .panel3 #cont { display:inline-block; }
  }

display：inline-block和display：inline属性Clarification做什么用

1 个答案: