显示Text,Textfield&按钮在一行

时间:2016-03-22 12:09:14

标签: php html css

访问link1

搜索"检查"使用CTRL + F,你可以看到:

enter image description here

我希望将其显示为link2

enter image description here

我们使用以下代码:

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; ?>

2 个答案:

答案 0 :(得分:2)

像这样编辑你的HTML:

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

将此类添加到CSS文件中:

$ gsettings set org.gnome.desktop.wm.keybindings switch-to-workspace-down "['']"

$ gsettings set org.gnome.desktop.wm.keybindings switch-to-workspace-up "['']"