隐藏文本、文本字段和按钮之间的空格。

Question

请访问链接

在这里您可以看到如下所示：

​

​

我想隐藏"Text1“、"Textfield”和"check“按钮之间的空空间。

在两条水平线之间也有空的空间。

我想显示“检查”按钮旁边的文本字段“。

我试着用"position : relative ; right: 200px;“

但它影响到了页面的其他部分。

.block-check-delivery .block-title strong {background-image:none; font-size: 11px;}
.block-check-delivery .block-content {padding:0 10px;  }
.block-check-delivery .button {float: right;}
.block-check-delivery input{width: 107px;}

我想这样展示：

在这里输入图像描述

Answer 1

<div class="block-title" style="
    display: inline-block;
">
                <strong><span>Check Availability at</span></strong>
    </div>
<div class="block-content" style="
    display: inline-block;
    vertical-align: middle;
">        
        <br>
            <input name="zipcode" size="17" type="text" id="zipcode" value="" maxlength="10" class="input-text" placeholder="Enter ZIP Code">
            <button type="button" name="zip-check" title="Check" class="button" id="zip-check"><span>Check</span></button>
            <div id="delivery-message"></div>
                        <div id="delivery-html"></div>

        <br>        
    </div>

你的要求

​

Answer 2

该按钮有一个CSS规则：

.block-check-delivery .button {
  float: right;
}

这才是制造麻烦的原因。删除float: right规则，它就会没事的。

Answer 3

空间是由一个<br>元素生成的，您可以使用CSS隐藏该元素，其规则如下：

.block-check-delivery .block-content > br:first-child {
  display: none;
}

然后

.block-check-delivery .block-title {
    float: left;
    margin-right: 10px;
    border: 0;
}

而且按钮应该有

.block-check-delivery .button {
  float: left;
}

我建议你也试试这个规则来修正设计：

.block-check-delivery .block-content > br:last-child {
  display: none;
}

一般来说，使用<br>元素在元素之间创建空间是一种糟糕的设计模式。我希望您依赖padding和margin规则，并从HTML中删除这些<br>元素。