ASPX 页面上的格式问题

发布于 2024-12-12 00:34:04 字数 1030 浏览 0 评论 0原文

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

 State : <dropdown>
   zip : <textbutton>

请注意，“:”代表 State &所有线路中的城市应该相同。目前我得到了下面的东西。

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

原文

Scenario: I want to display the following through ASPX page

 State : <dropdown>
   zip : <textbutton>

Note that the ":" for both State & City should be same in all lines. Currently I am getting something below.

 State : <dropdown>
 zip : <textbutton>

I must be doing something wrong but don't know yet. Appreciate any inputs,

Here is my code so far,

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

and the class LabelLeftAligned is defined below in the stylesheet.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

累赘 2024-12-19 00:34:04

将标签变成块级元素，给它一个宽度并右对齐。

类似于：（完整示例）

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

示例如下：

在此处输入图像描述

Turn the label into a block level element, give it a width and right align it.

Something like: (full example)

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

example below:

enter image description here

回复收藏 0 原文

等风来 2024-12-19 00:34:04

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

点击此处进行工作演示。

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

You can use table formatting in CSS to achieve this. You would use layout for your rows and cells, and text-align to control the horizontal alignment.

Click here for a working demonstration.

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

回复收藏 0 原文

顾铮苏瑾 2024-12-19 00:34:04

根据我所看到的一点点，将数据表化，在这种情况下应该不是问题

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

，或者

将状态和 zip 包装在 div 中，然后将其向左浮动，并留有宽度

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

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

either table the data which in this case shouldn't be a problem based on the little bit I am seeing

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

wrap the state and zip in a div and then float it left with a width on it

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

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

回复收藏 0 原文

~没有更多了~