(https://i.stack.imgur.com/vBDe2.png)

我使用的是radiobuttonlist，它在gridview中獲取關(guān)于rowDataBound事件的數(shù)據(jù)，但是在渲染時(shí)它占用了很多空間。我嘗試使用css-width屬性在內(nèi)部css中定義它，但是也沒(méi)有用。我也試圖定義td的寬度，但這也沒(méi)有幫助。

將RB重復(fù)方向設(shè)置為& quot水平& quot工作？

說(shuō)出這個(gè)標(biāo)記:

<asp:GridView ID="GridView1" runat="server" ShowHeaderWhenEmpty="true"
            AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table table-hover"
            Width="60em">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Province" HeaderText="Province" />
                <asp:BoundField DataField="Description" HeaderText="Description" />
                <asp:TemplateField HeaderText="Room Clean">
                    <ItemTemplate>
                        <asp:RadioButtonList ID="RBYesNo" runat="server"
                            RepeatDirection="Horizontal">
                            <asp:ListItem>Yes</asp:ListItem>
                            <asp:ListItem>No</asp:ListItem>
                        </asp:RadioButtonList>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

要加載的代碼:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadGrid
    End If
End Sub


Sub LoadGrid()

    GridView1.DataSource =
        MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName")

    GridView1.DataBind()

End Sub

和結(jié)果:

你可以隨時(shí)添加一些風(fēng)格的空間，或做任何與RB列表。

像這樣說(shuō):

或者這樣:

所以，我有一個(gè)老& quot痛打& quot上面的表格看起來(lái)是這樣的:

.rMyChoice h1 {
        color: hsla(215, 5%, 10%, 1);
        margin-bottom: 2rem;
    }

    .rMyChoice section {
        display: flex;
        flex-flow: row wrap;
    }

    section > div {
        flex: 1;
        padding: 0.5rem;
    }

    .rMyChoice input[type=radio], input[type=checkbox] {
        display: none;
        cursor: pointer;
    }


    .rMyChoice label {

        display: block;
        background: white;
        border: 2px solid hsla(150, 5%, 75%, 1);
        border-radius: 25px;
        padding-left: 8px;
        padding-right: 8px;
        text-align: center;
        box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
        position: relative;
        margin-right: 9px;

    }

    .rMyChoice input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
        background: hsla(150, 5%, 75%, 1);
        color: hsla(215, 0%, 100%, 1);
        box-shadow: 0px 0px 20px hsla(150,5%, 75%, 0.75);
    }

    .rMyChoice input[type="radio"]#control_05:checked + label {
        background: red;
        border-color: red;
    }

    .rMyChoice p {
        font-weight: 900;
    }

以上需要一些愛(ài)和關(guān)懷，但時(shí)間不夠，現(xiàn)貼& quot原樣& quot。

因此，上面的評(píng)級(jí)列表(gridview)標(biāo)記如下所示:

<asp:BoundField DataField="Description" HeaderText="Description" />
                <asp:TemplateField HeaderText="Rating">
                    <ItemTemplate>
                        <asp:RadioButtonList ID="RBYesNo" runat="server" CssClass="rMyChoice"
                            RepeatDirection="Horizontal">
                            <asp:ListItem>Poor</asp:ListItem>
                            <asp:ListItem>Fair</asp:ListItem>
                            <asp:ListItem>Good</asp:ListItem>
                            <asp:ListItem>Excellent</asp:ListItem>
                            <asp:ListItem>5&nbsp;star</asp:ListItem>
                        </asp:RadioButtonList>
                    </ItemTemplate>
                </asp:TemplateField>