在asp.net和css中對齊控件

我有一個webform應用程序，我已經desinged在圖像中看到。 vs designer 在asp.net和css中對齊控件

現在這裏是瀏覽器渲染爲同一頁。 Broser output

您可以看到輸出完全未對齊。但設計師檔案我完美。

標記太長，不能在這裏發佈，但我有兩個div一個左和右完美alinged。

我用下面的CSS標籤

.label, .textbox{ 
    width:150px; 
    text-align:left; 
    float:left; 
    display:block; 
    } 
.label, .dropdownlist{ 
width:150px; 
text-align:left; 
float:left; 
display:block; 
} 
.label,.dropdownlist{ 

text-align:left; 
float:left; 
display:block; 
margin-left: 23px; 
    }

沒有其他相關的是，我能想到的，能做出這樣的misalgined輸出。還有一件事是每個控件都嵌套一個ul標籤。

任何和所有的幫助是非常appreaciated。

來源

2014-03-24 REZR.AMX

同時粘貼你的html！ – Bellash

粘貼時間過長。但我會嘗試粘貼它。 –

@ REZR.AMX一點建議不要改變你的CSS從設計師的樣子，在瀏覽器中打開它，然後編寫css規則 – Rex

我想可能是有幫助清理你的CSS，這是一個有點多餘。下面就相當於當前的CSS規則：

.label, .textbox, .dropdownlist 
{ 
    width:150px; 
    text-align:left; 
    float:left; 
    display:block; 
} 

.label,.dropdownlist 
{ 
    margin-left: 23px; 
}

這其實看起來不錯你要完成（我認爲display:inline-block可能是更多的語義的選擇，但既然你已經浮到左邊什麼，我不認爲這有什麼區別）。

不過，這一說法：

一件事每個控件嵌套withing的UL標籤

關注我一點點。它看起來像是圍繞着控件的任何東西都不會以150像素寬的塊樣式格式顯示，這會導致元素之間的空間取決於標籤中的字符數。

您可以使用瀏覽器的開發人員工具查看當前哪些CSS規則將Label控件的寬度（或任何纏繞Label控件的寬度）設置爲小於150像素的寬度。

如果你展示了你的HTML或者更好的話，這對於jsfiddle.net上的一個小例子來說明問題將會很有幫助。

來源

2014-03-24 16:05:06 jadarnel27

你可以嘗試一個像Bootstrap這樣的框架，它可以幫助你很多。看看bootstrap的form和grid框架。

或者試試這個：

<div class="form-items"> 
    <label for="x">Label text</label> 
    <input type="text" name="x" id="x" />  
</div> 

<style> 
    div.form-items label { 
     width: 200px; 
     display: block; 
     float: left; 
    } 
    div.form-items input { 
     width: 300px; 
     display: block; 
     float: left; 
    } 
</style>

在這裏看到一個例子：JSFiddle

來源

2014-03-24 15:48:40 Marc

將試一試，但沒有其他方式來改善我的代碼沒有它？ –

肯定有，嘗試設置您的標籤顯示塊，寬度設置和向左浮動。然後確保每一組標籤和文本框都位於包裝div的內部。 – Marc

示例添加到我的答案與jsfiddle也測試它。 – Marc

在asp.net和css中對齊控件

回答

相關問題