проблема форматирования на странице ASPX - PullRequest
Новая
       5

проблема форматирования на странице ASPX

1 голос
/ 27 октября 2011

Сценарий: я хочу отобразить следующее на странице ASPX 

 State : <dropdown>
   zip : <textbutton>

Обратите внимание, что ":" для штата и города должно быть одинаковым во всех строках.В настоящее время я получаю что-то ниже. 

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

Ответы [ 3 ]

1 голос
/ 27 октября 2011

Превратите метку в элемент уровня блока, задайте его ширину и выровняйте по правому краю.

Примерно так: (полный пример) 

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

0 голосов
/ 27 октября 2011

Вы можете использовать форматирование таблиц в 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>
0 голосов
/ 27 октября 2011

или таблица данных, которая в этом случае не должна быть проблемой, на основе того, что я вижу 

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

OR

обернуть состояние и сжать в div, а затем переместить его влево с шириной 

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

<style>
 .floatLeft {float: left; width: 300px; }
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...