Question

请访问link

这里你可以看到如下图所示：

enter image description here

我想隐藏“Text1”，“Textfield”和＆amp;之间存在的空白区域。 “检查”按钮。

两条水平线之间也有空格。

我想在文本字段“。

旁边显示”检查“按钮

我尝试使用“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;}

我希望显示如下：

enter image description here

Answer 1

按钮有一个CSS规则：

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

那是导致麻烦的那个。删除float: right规则即可。

Answer 2

空间由<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>元素。

Answer 3

使用这两种样式后，结果似乎是正确的...然后您可以使用“块标题”或“检查”按钮上的边距进行播放。

.block-title {
    position: relative;
    padding: 10px 0 0;
    margin-bottom: 5px;
    // border-top: 1px solid #cccccc; // remove this...
    border: none !important; // Add this
    display: inline-block; // <----- ADD THIS
}
.block-content {
    margin-top: 5px;
    display: inline-block; // <----- ADD THIS
}

这是图像结果......

Answer 4

你需要删除Div class =＆＃34; block-title＆＃34;并在Div class =＆＃34; block-content＆＃34;中放置强标记。也删除br标签

Answer 5

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

您的要求是

隐藏文本，文本字段和按钮之间的空白区域

5 个答案: