ekranı Metin, bir satır

Question

ziyaret Gördüğünüz daha CTRL + F kullanarak "check" için link1

arama içinde Textfield & Button: Ben link2 olarak böyle görüntülemek istedi

aşağıdaki kodu kullanıyor:

css

font: 12px/1.35 Arial, Helvetica, sans-serif; 
    padding: 2px 8px !important; 
    border: 1px solid FFFFFF; 
    color: FFFFFF; 
    height: 29px; 
    line-height: 29px; 
    border-radius: 0; 

} 


.catalog-product-view button.button span span { 
    color: #fff; 
    float: left; 
    font-size: 16px; 
    font-weight: normal !important; 
    text-align: center; 

phtml

<?php if ($this->isFieldVisible('postcode')): ?> 
      <li class="item"> 
       <label for="estimate_postcode"<?php if ($this->isFieldRequired('postcode')):?> class="required" <?php endif;?>><?php if ($this->isFieldRequired('postcode')):?><em>*</em><?php endif;?><?php echo Mage::helper('webdevlopers_productpageshipping')->__('') ?></label> 
       <div class="input-box"> 
       <img src ="http://totaltoys.com/media/font-100.png" height= '35' width= '70'> 
        <input placeholder="Enter your PIN Code" class="input-text validate-postcode<?php if ($this->isFieldRequired('postcode')):?> required-entry<?php endif;?>" type="text" id="estimate_postcode" name="estimate[postcode]" value="<?php echo $this->htmlEscape($this->getFieldValue('postcode')) ?>" /> 
       </div> 
      </li> 
     <?php endif; ?> 

Answer 1

düzenle böyle HTML:

li.item { 
 
    align-items: center; 
 
    display: flex; 
 
} 
 
li.item img { 
 
    opacity: .3; 
 
    height: 20px; 
 
    width: 40px; 
 
} 
 
li.item label { 
 
    color: #aaa; 
 
    font-family: 'ubuntu'; 
 
} 
 
li.item .search { 
 
    margin-left: 6px; 
 
} 
 
li.item .search input { 
 
    border: 1px solid #ddd; 
 
    border-radius: 3px; 
 
    padding: .5rem; 
 
} 
 
li.item .search button { 
 
    background-color: #00bfff; 
 
    border: none; 
 
    border-radius: 3px; 
 
    color: #fefefe; 
 
    padding: .5rem .5rem; 
 
}

<li class="item"> 
 
    <img src="http://totaltoys.com/media/font-100.png" alt="" /> 
 
    <label for="search">Check availability</label> 
 
    <div class="search"> 
 
     <input type="text" id="search" placeholder="Enter your PIN code"/> 
 
     <button>Check</button> 
 
    </div> 
 
</li>

Answer 2

CSS dosyasına bu sınıfları ekleyin:

.actions { 
float: left; 
margin-top: 9%; 
} 
ul#shipping-estimation-form { 
float: left; 
}