2017-04-10 4 views
0

Ich habe eine asp.net Webformular Seite, und meine checkboxlist wird nicht ordnungsgemäß funktionieren -
Elemente in checkboxlist immer vertikal ausrichten, aber ich muss es horizontal in CSS machen.
Ich verstehe dieses Problem in der Feldanzeige: Block;
Aber ich brauche dies alle Div zu formatieren, und wenn ich CSS für Checkbox - Check-Feld hinzufügen, es ändert sich nicht.
Wie kann ich checkboxlist Element horizontal ausrichten? Jetzt habe ich dies:
enter image description hereProbleme mit der Ausrichtung von Asp Checkboxlist

Aber ich will es ausrichten horizontal
Mein Code:

<div id="infodif" runat="server" visible="true" class="form-style-2"> 
 
    <div class="form-style-2-heading"> 
 
    <asp:Label ID="Label6" runat="server" /> 
 
    </div> 
 
    <label><span>First <span class="required">*</span></span><asp:TextBox ID="faminfobox" class="input-field" runat="server" onkeypress="return isAlphaNumericKey(event);" /></label> 
 
    <label><span>Second <span class="required">*</span></span><asp:TextBox ID="iminfobox" class="input-field" runat="server" onkeypress="return isAlphaNumericKey(event);" /></label> 
 
    <label><span>Third <span class="required">*</span></span><asp:TextBox ID="otinfobox" class="input-field" runat="server" onkeypress="return isAlphaNumericKey(event);" /></label> 
 
    <label><span>Four <span class="required">*</span></span><asp:TextBox ID="OGRNinfobox" CssClass="input-field" class="input-field" runat="server" disabled="true" Enabled="false" onkeypress="return allowOnlyNumber(event);" /></label> 
 
    <label><span>Five <span class="required">*</span></span><asp:TextBox ID="TabNominfobox" CssClass="input-field" class="input-field" runat="server" Enabled="false" onkeypress="return allowOnlyNumber(event);" /></label> 
 
    <label><span>CHECK</span><asp:CheckBoxList ID="CheckBoxList1" runat="server" DataValueField="idGK" CssClass="check-field" class="check-field" DataTextField="ShortName" SelectMethod="GetFinance" RepeatLayout="Flow" RepeatDirection="Horizontal"/></label> 
 
    <label><span>Seven <span class="required">*</span></span><asp:TextBox ID="commentbox" CssClass="textarea-field" class="textarea-field" Text="Введите причину изменения" Enabled="false" runat="server" Height="21px" /></label> 
 
    <label><span>Eight</span><asp:DropDownList ID="sexinfodrop" runat="server" class="select-field" SelectMethod="GetSex" DataValueField="w" DataTextField="pol" EnableViewState="true" /></label> 
 

 

 
    <label><span>&nbsp;</span><input type="submit" value="Submit" /></label> 
 
    <label><span>&nbsp;</span><asp:Button ID="SaveBtn" Text="Сохранить" runat="server" OnClick="SaveBtn_Click" Visible="true" /><asp:Button ID="ChangeReqAf" Text="Сохранить Изменения" runat="server" OnClick="ChangeReqAf_Click" Visible="false" /></label> 
 

 
</div>

Meine CSS:

.form-style-2{ 
 
    max-width: 800px; 
 
    /*display: flexbox;*/ 
 
    padding: 20px 12px 10px 20px; 
 
    font: 13px Arial, Helvetica, sans-serif; 
 
} 
 
.form-style-2-heading{ 
 
    font-weight: bold; 
 
    font-style: italic; 
 
    border-bottom: 2px solid #ddd; 
 
    margin-bottom: 20px; 
 
    font-size: 15px; 
 
    padding-bottom: 3px; 
 
} 
 
.form-style-2 label{ 
 
    display:block; 
 
    margin: 0px 0px 15px 0px; 
 
    
 
} 
 
.form-style-2 label > span{ 
 
    width: 300px; 
 
    font-weight: bold; 
 
    float: left; 
 
    padding-top: 8px; 
 
    padding-right: 5px; 
 
} 
 
.form-style-2 span.required{ 
 
    color:red; 
 
} 
 

 
.form-style-2 input.input-field{ 
 
    width: 48%; 
 
    
 
} 
 

 

 
.form-style-2 .check-field { 
 
    display: table-row; 
 
    float: left; 
 
    
 
}

UPDATE:
1. Ich Update CSS-Code.

  1. Ich habe jetzt enter image description here

Antwort

1

Try verwenden kann:

RepeatLayout="Table" zusammen mit RepeatDirection="Horizontal"

+0

Es funktioniert, aber in diesem Fall verliere ich Formatierung. Wie kann ich es ohne Grenzen und mit einer anderen Schriftart machen? –

+0

@ АндрейГолубцов fügen Sie Ihr Bild nach der Anwendung von oben Attribut, so dass ich Ihnen mit der Lösung – Webruster

+0

ich Code und laden Bild –

0

Sie felxbox, so etwas wie diese

.form-style-2 { 
 
    /*max-width: 500px;*/ 
 
    display: flex; 
 

 
    font: 13px Arial, Helvetica, sans-serif; 
 
} 
 

 
.form-style-2-heading { 
 
    font-weight: bold; 
 
    font-style: italic; 
 
    border-bottom: 2px solid #ddd; 
 
    margin-bottom: 20px; 
 
    font-size: 15px; 
 
    padding-bottom: 3px; 
 
} 
 

 
.form-style-2 label { 
 
    display: block; 
 
    margin: 0px 0px 15px 0px; 
 
} 
 

 
.form-style-2 label>span { 
 
    width: 100px; 
 
    font-weight: bold; 
 
    float: left; 
 
    padding-top: 8px; 
 
    padding-right: 5px; 
 
} 
 

 
.form-style-2 span.required { 
 
    color: red; 
 
} 
 

 
.form-style-2 input.input-field { 
 
    width: 48%; 
 
} 
 

 
.form-style-2 .check-field { 
 
    display: table-row; 
 
    float: left; 
 
}
<div id="infodif" runat="server" visible="true" class="form-style-2"> 
 
    <div class="form-style-2-heading"> 
 
    <asp:Label ID="Label6" runat="server" /> 
 
    </div> 
 
    <label><span>First <span class="required">*</span></span><asp:TextBox ID="faminfobox" class="input-field" runat="server" onkeypress="return isAlphaNumericKey(event);" /></label> 
 
    <label><span>Second <span class="required">*</span></span><asp:TextBox ID="iminfobox" class="input-field" runat="server" onkeypress="return isAlphaNumericKey(event);" /></label> 
 
    <label><span>Third <span class="required">*</span></span><asp:TextBox ID="otinfobox" class="input-field" runat="server" onkeypress="return isAlphaNumericKey(event);" /></label> 
 
    <label><span>Four <span class="required">*</span></span><asp:TextBox ID="OGRNinfobox" CssClass="input-field" class="input-field" runat="server" disabled="true" Enabled="false" onkeypress="return allowOnlyNumber(event);" /></label> 
 
    <label><span>Five <span class="required">*</span></span><asp:TextBox ID="TabNominfobox" CssClass="input-field" class="input-field" runat="server" Enabled="false" onkeypress="return allowOnlyNumber(event);" /></label> 
 
    <label><span>CHECK</span><asp:CheckBoxList ID="CheckBoxList1" runat="server" DataValueField="idGK" CssClass="check-field" class="check-field" DataTextField="ShortName" SelectMethod="GetFinance" RepeatLayout="Flow" RepeatDirection="Horizontal"/></label> 
 
    <label><span>Seven <span class="required">*</span></span><asp:TextBox ID="commentbox" CssClass="textarea-field" class="textarea-field" Text="Введите причину изменения" Enabled="false" runat="server" Height="21px" /></label> 
 
    <label><span>Eight</span><asp:DropDownList ID="sexinfodrop" runat="server" class="select-field" SelectMethod="GetSex" DataValueField="w" DataTextField="pol" EnableViewState="true" /></label> 
 

 

 
    <label><span>&nbsp;</span><input type="submit" value="Submit" /></label> 
 
    <label><span>&nbsp;</span><asp:Button ID="SaveBtn" Text="Сохранить" runat="server" OnClick="SaveBtn_Click" Visible="true" /><asp:Button ID="ChangeReqAf" Text="Сохранить Изменения" runat="server" OnClick="ChangeReqAf_Click" Visible="false" /></label> 
 

 
</div>

+0

nein, meine Elemente in der Checkbox immer noch vertikal ( –

+0

haben Sie die Polsterung entfernt und ersetzen Sie sie mit display: flex? Auf welchem ​​Browser testeest du? weil ie11 keine gute Unterstützung von flexbox – k185

+0

haben, mache ich so, aber das gibt mir nichts. Ich benutze zB um zu testen. Ich habe ein gutes Ergebnis in Kontrollkästchen, wenn ich Anzeige lösche: Block von .form-style-2 Label, aber meine Formatierung aller div ist in diesem Fall verlieren. Hast du einen Vorschlag, warum es so funktioniert? –

Verwandte Themen