Question

场景：我想通过ASPX页面显示以下内容

 State : <dropdown>
   zip : <textbutton>

请注意State＆amp;的“：”各个城市的城市应该是一样的。目前我正在收到以下内容。

 State : <dropdown>
 zip : <textbutton>

我一定做错了什么但还不知道。感谢任何输入，

到目前为止，这是我的代码，

<div style="text-align:center" >
<asp:Label runat="server" id="StateCategory" Text ="State:" CssClass="LabelLeftAligned" />
<asp:DropDownList runat="server" ID="StateDDown" DataTextField="Name" AppendDataBoundItems="true"></asp:DropDownList>
</div>

<div style="text-align:center" >
<asp:Label runat="server" id="lblzipCode" Text ="Zip:" CssClass="LabelLeftAligned" />
<asp:TextBox ID="txtboxZipcode" runat="server" MaxLength="5" />
</div>

，LabelLeftAligned类在下面的样式表中定义。

.LabelLeftAligned {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: black;
    font-weight: bold;
    text-align: left;
}

Answer 1

将标签转换为块级元素，给它一个宽度并右对齐。

类似的东西:(完整的例子）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<style> 
  .LabelRightAligned { 
    display:block; 
    width: 150px; 
    text-align:right; 
    float:left; 
  } 


  .ddl { 
    float:left;
    margin-left:10px; 
  } 
</style> 

</head>

<body>

<div style="text-align:center;clear:both;">  
    <span class="LabelRightAligned">State:</span>
    <select class="ddl">
        <option value="volvo" />
        <option value="chevy" />
    </select>
</div> 
<div style="text-align:center;clear:both;">  
    <span class="LabelRightAligned">zip:</span>
    <input type="text" name="zip" id="zip" value="23423" class="ddl" />
</div> 

</body>
</html>

以下示例：

enter image description here

Answer 2

您可以在CSS中使用表格格式来实现此目的。您可以对行和单元格使用layout，并使用text-align来控制水平对齐。

点击here进行工作演示。

<style type="text/css"> 
.table {  
    display:table;  
    border-collapse:collapse;  
}       
.table-row {  
    display:table-row;  
}       
.left-col {
    text-align:right; 
}    
.right-col {
    text-align:left; 
}    
.left-col, .right-col {  
    display:table-cell;  
}         
</style> 

<div class="table">  
    <div class="table-row">  
        <div class="left-col">  
            Foobar:  
        </div>  
        <div class="right-col">  
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
        </div>  
    </div> 
    <div class="table-row">
        <div class="left-col">  
            Bar:  
        </div>  
        <div class="right-col">  
            <asp:TextBox ID="txtTestB" runat="server"></asp:TextBox> 
        </div>          
    </div>
</div>

Answer 3

要么根据我看到的一点点来表示在这种情况下不应该成为问题的数据

<table>
 <tr>
  <td>State</td>
  <td>:</td>
  <td><dropdown></td>
 </tr>
 <tr>
  <td>Zip</td>
  <td>:</td>
  <td><textbutton></td>
 </tr>
</table>

OR

将状态和zip压缩在一个div中，然后将其向左浮动，其宽度为

<div class="floatLeft">State</div> : <dropdown>
<div class="floatLeft">Zip</div> : <textbutton>

<style>
 .floatLeft {float: left; width: 300px; }
</style>

ASPX页面上的格式化问题

3 个答案: