user9999 user9999 - 5 months ago 7
CSS Question

display text and textfield in signle line

we are using below code to display text and textfield as like below :

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>


but i wanted to display both text & textfield in single line as below :

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

Answer

.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>