在竖线

Question

我们使用下面的代码来显示文本和文本字段，如下所示：

http://i.stack.imgur.com/dTL1K.png

<li class="inline-label">
<label for="summary_field" class="required"><em></em><?php echo $this->__('Review Title :') ?></label>
<div class="input-box">

<input type="text" name="title" id="summary_field" class="input-text required-entry" value="<?php echo $this->escapeHtml($data->getTitle()) ?>" />
</div>
<p>( Maximum 60 characters )</p>
</li>

但我想同时显示文字和文字单行文本字段如下：

http://i.stack.imgur.com/fdAEO.png

Answer 1

.input-box {
  width:100%;
}
.inline-label {
  display: inline-block;
  width:100%;
}
.required {
  float: left;
  padding-right: 15px;
}
p {
   float:left;
   margin-top:5px;
}
.input-box {
    width: 70%;
    float: left;
}
.input-text {
   width:100%;
   
}

<li class="inline-label">
   <label for="summary_field" class="required">
     <em>Review Title</em>
  </label>
   <div class="input-box">
       <input type="text" name="title" id="summary_field" class="input-text required-entry" value="">
  <p style="
    float: left;
">( Maximum 60 characters )</p>
   </div>
   
</li>

Answer 2

使用此

.inline-label>.input-box
{
  display:inline-block;
}

Working example