Question

HTML：

 <div id="tabNewAutomaticPurchaseOrder" class="tTab">
        <div class="ui form stackable two column grid ">
            <div class="seven wide column">

                <h3 id="lblPurchaseDetailsAutomatictab" class="ui top attached tiny header">Bestillingsdetaljer</h3>
                <div class="ui attached segment">
                    <asp:Label ID="lblOrderNumberAutomatictab" class="inHeaderTextField1" Text="Serienr. Bestilling:" runat="server"></asp:Label>
                    <asp:Label ID="Label11" class="inHeaderTextField2" Text="" runat="server"></asp:Label>
                    <asp:Label ID="lblOrderDateAutomatictab" class="inHeaderTextField3" Text="Bestillingsdato:" runat="server"></asp:Label>
                    <asp:Label ID="Label13" class="inHeaderTextField4" Text="" runat="server"></asp:Label>
                    <label class="inHeaderCheckbox">
                        Vis/Lukk
                            <button id="btnViewDetailsNEWPO2" class="ui btn mini">
                                <i class="caret down icon"></i>
                            </button>
                    </label>
                    <div class="itemadd-container">
                        <div class="fields">
                            <div class="three wide field">

                                <div id="lblSupplierNameAutomatictab" class="ui blue horizontal label">Leverandør</div>
                            </div>
                            <div class="three wide field">
                                <asp:TextBox ID="txtbxSupplierNameAutomatictab" runat="server" data-submit="SAVE_SUPPLIER_ITEM" meta:resourcekey="txtTechMakeResource1"></asp:TextBox>
                            </div>
                            <div class="two wide field">
                                <asp:TextBox ID="txtbxSupplierIdAutomatictab" runat="server" Enabled="false" ForeColor="Red"></asp:TextBox>
                            </div>
                        </div>

                        <div class="fields">
                         <div class="three wide field">                          
                             <div id="lblOrdertypeAutomatictab" class="ui blue horizontal label">Ordretype</div>
                        </div>
                        <div class="three wide field">
                            <asp:DropDownList ID="DropDownList1" CssClass="dropdowns" runat="server" meta:resourcekey="ddlordertypeFormResource1">
                                <asp:ListItem Text="" Value="" Selected="true"/>
                                <asp:ListItem Text="RE" Value="RE" />
                                <asp:ListItem Text="LO" Value="LO"/>
                            </asp:DropDownList>
                        </div>
                        <div class="two wide field">
                                <input type="button" id="Button1" runat="server" class="ui btn mini" value="+" />
                         </div>
                        </div>

                    <div class="fields">
                        <div class="three wide field">
                            <label id="Label16" runat="server">Forsendelsesmåte</label>
                        </div>

                        <div class="three wide field">
                            <asp:DropDownList ID="DropDownList2" CssClass="dropdowns" runat="server" meta:resourcekey="ddlordertypeFormResource1">
                                <asp:ListItem Text="" Value="" />
                                <asp:ListItem Text="Tog" Value="66" Selected="true"/>
                                <asp:ListItem Text="Bil" Value="67" />
                                <asp:ListItem Text="Hente selv" Value="68"/>
                            </asp:DropDownList>
                        </div>
                        </div>


                   <div class="fields">

                        <div class="two wide field">
                            <label id="Label17" runat="server">Forventet ankomst</label>
                        </div>
                        <div class="two wide field">
                            <asp:TextBox ID="TextBox8" CssClass="NEWpodatepicker" runat="server" data-submit="SAVE_SUPPLIER_ITEM" meta:resourcekey="txtTechMakeResource1" ForeColor="Red" Enabled="false" ></asp:TextBox>
                        </div>


                        </div>

                </div>
                    </div>
            </div>
    </div>

看来我在这里做错了：

Todo：

不希望文本框与标签重叠。
如何避免这种情况？我认为使用字段并指定他们的长度可以解决问题，显然没有。
如何使它响应，以便如果窗口缩小，文本框将不会与标签重叠？

问题Gif：

Answer 1

如果您使用的是html5，请在标头中使用meta标记，并避免在CSS中固定位置

meta name =“ viewport” content =“ width = device-width，initial-scale = 1.0”

这将设置页面的视口，这将向浏览器提供有关如何控制页面的尺寸和缩放比例的说明。

视口元素向浏览器提供有关如何控制页面尺寸和缩放比例的说明。

width = device-width部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。

语义用户界面元素无响应

1 个答案: