html - 显示 :inline-block and display:inline Property Clarification Do what to use

Question

因为我正在尝试将该订阅按钮向上移动一点，它应该位于左侧文本的中央。

如果我使用display:inline，我就能达到我的预期

但我想在 display:inline-block 中实现同样的事情

我也用过

width:400px

对于

.panel3 #cont

如果我在浏览器中放大，文本不会在 width:400px 内换行，我需要它响应文本，当它被缩放时，文本应该在 div 内自动分解。

这是 fiddle 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; }
  }