2个标签控件之间的HTML图像布局问题答案

【问题标题】：HTML Image Layout Issue between 2 Label Controls2个标签控件之间的HTML图像布局问题
【发布时间】：2023-03-17 08:04:01
【问题描述】：

我正在尝试使用 CSS Divs 创建表格外观，并且在标签控件之间插入透明图像时遇到问题，以便为这些标签之间提供相当数量的垂直空间。我想为 TextBox 控件完成相同的操作。

问题是这个图像出现在所有标签控件之前，而它们应该出现在每个标签控件之间

我已经尝试过使用：<br style="clear:both; line-height:50px;" /> 每个标签之间也不起作用。

我将不胜感激任何解决方案或替代方案。

<div id="contact">
    <div id="LeftLabelColumn">
        <asp:Label ID="Label1" runat="server" class="emaillable" Text="Name:"></asp:Label>
        <div class="linespace"></div>
        <asp:Label ID="Label2" runat="server" class="emaillable" Text="Company:"></asp:Label>
        <div class="linespace"></div>
    </div>    
    <div id="RightControlColumn">
        <asp:TextBox ID="TextBox1" runat="server" class="contacttextbox"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" class="contacttextbox"></asp:TextBox>
    </div>
</div>

#contact {
    height:318px;
    width:848px;
    margin:6px 0 0 17px;
    position:relative;
    overflow:hidden; 
    /*background-color:green;*/
}
#LeftLabelColumn {
    height:318px;
    width:100px;
    float:left;
    position:relative;
    background-color:orange;   
}
#RightControlColumn {
    height:318px;
    width:276px;
    float:left;
    position:relative;
    background-color:red;
}
.emaillabel {
    height:120px;
    display: block;
    margin-bottom:125px;
} 
.linespace {
    height: 650px;
    float:left;
    position:relative;
    display: block;    
}

【问题讨论】：

标签： html

【解决方案1】：

将标签和图像包装在 div 中，并将 style="float:left" 放在每个新 div 上

【讨论】：

不，我的意思是把每个项目放在他们自己的 div 中，向左浮动

【解决方案2】：

您应该在标记中添加class="label"

<asp:Label ID="Label1" runat="server" Text="Name:" class="label"></asp:Label>

然后像这样用 css 设置样式：

.label {margin-bottom: 10px;}

【讨论】：

那没有做任何事情。我还需要图片吗？
尝试添加：.label {display: block;边距底部：10px;}
或尝试标签>
用css会更好，但你也可以编码：
我尝试使用 2 个 BR 标签，但问题是控件需要相同的垂直距离。我可以 JSFiddle 这个。

【解决方案3】：

   <div id="contact">
    <div id="LeftLabelColumn" class="emaillabel">
        <asp:Label ID="Label1" runat="server" CssClass="emaillable" Text="Name:"></asp:Label>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />
        <asp:Label ID="Label2" runat="server" CssClass="emaillable" Text="Company:"></asp:Label>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />
        <asp:Label ID="Label3" runat="server" CssClass="emaillable" Text="Email:"></asp:Label>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />
        <asp:Label ID="Label4" runat="server" CssClass="emaillable" Text="Phone:"></asp:Label>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />
    </div> 
    <div id="MidLabelColumn">&nbsp;</div>
    <div id="RightControlColumn">
        <asp:TextBox ID="TextBox1" runat="server" class="contacttextbox" Width="224px" TabIndex="1"></asp:TextBox>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />            
        <asp:TextBox ID="TextBox2" runat="server" class="contacttextbox" Width="224px" TabIndex="2"></asp:TextBox>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />            
        <asp:TextBox ID="TextBox3" runat="server" class="contacttextbox" Width="224px" TabIndex="3"></asp:TextBox>
        <div class="linespace"></div>
        <br style="clear:both; line-height:0px;" />
    </div>           
</div>

#contact {
    height:318px;
    width:848px;
    margin:6px 0 0 17px;
    position:relative;
    overflow:hidden; 
    /*background-color:green;*/
}
#LeftLabelColumn {
    height:318px;
    width:80px;
    float:left;
    position:relative;
    background-color:orange;   
}
#MidLabelColumn {
    height:318px;
    width:5px;
    float:left;
    position:relative;
    background-color:blue;   
}
#RightControlColumn {
    height:318px;
    width:276px;
    float:left;
    position:relative;
    background-color:red;
}
.emaillabel {
    display: block;
    float:right;
    text-align:right;
    font-family:Arial;
    font-size:14px;
    /*height: 200px;*/
    /*margin-bottom: 50px;*/
} 
.linespace {
    height: 25px;
    float:left;
    position:relative;
    display: block;
}

【讨论】：

【解决方案4】：

<html>
<head>
<style type="text/css">

#contact {
    height:318px;
    width:848px;
    margin:6px 0 0 17px;
    position:relative;
    overflow:hidden; 
}
#LeftLabelColumn {
    height:318px;
    width:80px;
    float:left;
    position:relative;
    background-color:orange;   
}
#MidLabelColumn {
    height:318px;
    width:5px;
    float:left;
    position:relative;
    background-color:blue;   
}
#RightControlColumn {
    height:318px;
    width:276px;
    float:left;
    position:relative;
    background-color:red;
}
label {
    display: block;
    float:right;
    text-align:right;
    font-family:Arial;
    font-size:14px;
    padding-top:7px
} 

input
{
 width:224px;
}

.linespace {
    height: 25px;
    float:left;
    position:relative;
    display: block;
    clear:both; 
}</style>
</head>

<body>

 <div id="contact">
    <div id="LeftLabelColumn">
        <label>Name:</label>
        <div class="linespace"></div>
        <label>Company:</label>
        <div class="linespace"></div>
        <label>Email:</label>
        <div class="linespace"></div>
        <label>Phone:</label>
        <div class="linespace"></div>
    </div> 
    <div id="MidLabelColumn">&nbsp;</div>
    <div id="RightControlColumn">
        <input class="contacttextbox"/>
        <div class="linespace"></div>
        <input class="contacttextbox" />
        <div class="linespace"></div>
        <input class="contacttextbox" />
        <div class="linespace"></div>
        <input class="contacttextbox" />
    </div>           
</div>

</body>
</html>

【讨论】：