按钮和文本框未内联答案

【问题标题】：Button and Textbox Not Inline按钮和文本框未内联
【发布时间】：2013-03-04 19:30:05
【问题描述】：

我有以下代码

        <div class="well sidebar-nav">
        <ul class="nav nav-list">
            <li class="nav-header-myLeagues">Create A New League</li>
            <li class="divider"></li>
            <li class="li-myLeagues">
                <asp:Label ID="LeagueNameLabel" runat="server">League Name:</asp:Label></li>
            <li class="li-myLeagues">
                <asp:TextBox ID="LeagueNameTextBox" runat="server"></asp:TextBox>
                <asp:Button ID="SubmitNewLeagueButton" CssClass="btn btn-primary" runat="server" CommandName="SubmitNewLeague" Text="Submit" />
            </li>
        </ul>
    </div>

由于某种原因，按钮与文本框不完全一致，有什么想法吗？

【问题讨论】：

标签： asp.net css

【解决方案1】：

尝试将您的 CSS 如下所示

.li-myLeagues li
{
     display: inline;
      list-style-type: none;
     padding-right: 20px;
     float: left;
}

这会很有用....

见here is the same thing which I had made for you..

【讨论】：

【解决方案2】：

将文本框和按钮包装在<div></div> 中并将css float:left 设置为div

<li class="li-myLeagues">
    <div style="float:left">
        <asp:TextBox ID="LeagueNameTextBox" runat="server"></asp:TextBox></div>
    <div style="float:left;margin-left:10px;">
            <asp:Button ID="SubmitNewLeagueButton" CssClass="btn btn-primary" runat="server" CommandName="SubmitNewLeague" Text="Submit" />
</div>        
</li>

将css添加到类.li-myLeagues

.li-myLeagues
{
display:inline-block;
float:left;
}

【讨论】：