Html 隐藏文本、文本字段和按钮之间的空白

请访问

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

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

两条水平线之间也存在空白

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

我试着使用“

position:relative；右：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;}

我想这样显示：

该按钮具有CSS规则：

.block check delivery.button{
浮动：对；
}

这就是造成问题的原因。删除
float:right
规则，它就可以了。
空间是由

元素生成的，您可以使用CSS根据以下规则隐藏该元素：

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

然后

按钮也应该有

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

我建议您也尝试一下这个规则来修复设计：

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

一般来说，使用

元素在元素之间创建空间是一种糟糕的设计模式。我希望您依靠
填充
和
边距
规则，从HTML标记中删除那些

元素。

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

在


检查



您的要求是否使用这两种样式？结果似乎是正确的…然后您可以使用“块标题”或“检查”按钮上的边距

。块标题{
位置：相对位置；
填充：10px0；
边缘底部：5px；
//边框顶部：1px实心#cccccc；//删除此。。。
边框：无！重要；//添加此
显示：inline block；//您需要删除Div class=“block title”并在Div class=“block content”中放置强标记。
另请删除br tag
无法访问链接。请查看您是如何发布的。我已更新了问题欢迎使用堆栈溢出！寻求代码帮助的问题必须包含在问题本身中复制该问题所需的最短代码。虽然您提供了一个，但如果链接无效，您的问题对其他将来的问题将没有任何价值，因此您可以sers也有同样的问题。请检查链接，我想这样显示：，表示在“textfield”和按钮的同一行显示“check Availability at”文本。还请帮助我减少按钮上方和下方的空白。请检查链接，我想这样显示：表示在“check Availability at”文本的同一行显示“check Availability at”textfield”和按钮您可以看到“check delivery availability”文本上方显示了两条水平线，我想在此处删除一条水平线：。块标题{位置：相对；填充：10px 0 0；页边距底部：5px；边框顶部：无；显示：内联块；}.std ul{list style:disc outside；/*margin bottom:1.5em；*/}请检查是否显示了另一行。是否要删除bottom one以删除将删除它的行上方的
标记请帮助我删除“check delivery availability”文本上方的行：@ng369您只需要删除css样式上的“border top”.block-title:“）我删除了它，请检查链接，现在又显示了一行。@ng369好的，您有另一个样式覆盖了“.block-title”上的边框，然后，强制“.block-title”的样式添加“border:none”；如果您想绝对确定，请使用“border:none！important”；“。我试着这样做：
边框顶部：无；！重要的
，但不起作用
<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>

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