asp：radiobuttonlist css風格

Question

我已經使用默認的.net模板創建了一個asp.net網站，並且我的單選按鈕列表具有巨大的單選按鈕。

像這樣：

我的問題是，怎樣才能得到與無線電按鈕上的文本內聯，也有按鈕儘可能少嗎？

我知道這是CSS相關但不確定哪個是負責。

這裏是CSS：

html { 
    background-color: #e2e2e2; 
    margin: 0; 
    padding: 0; 
} 

body { 
    background-color: #fff; 
    border-top: solid 10px #000; 
    color: #333; 
    font-size: .85em; 
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding: 0; 
} 

a { 
    color: #333; 
    outline: none; 
    padding-left: 3px; 
    padding-right: 3px; 
    text-decoration: underline; 
} 

    a:link, a:visited, 
    a:active, a:hover { 
     color: #333; 
    } 

    /*a:hover { 
     background-color: #FF3A8F; 
    }*/ 

header, footer, hgroup, 
nav, section { 
    display: block; 
} 

mark { 
    background-color: #a6dbed; 
    padding-left: 5px; 
    padding-right: 5px; 
} 

.float-left { 
    float: left; 
} 

.float-right { 
    float: right; 
} 

.clear-fix:after { 
    content: "."; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

h1, h2, h3, 
h4, h5, h6 { 
    color: #000; 
    margin-bottom: 0; 
    padding-bottom: 0; 
} 

h1 { 
    font-size: 2em; 
} 

h2 { 
    font-size: 1.75em; 
} 

h3 { 
    font-size: 1.2em; 
} 

h4 { 
    font-size: 1.1em; 
} 

h5, h6 { 
    font-size: 1em; 
} 

    h5 a:link, h5 a:visited, h5 a:active { 
     padding: 0; 
     text-decoration: none; 
    } 

/* main layout 
----------------------------------------------------------*/ 
.content-wrapper { 
    margin: 0 auto; 
    max-width: 1280px;/*960px;*/ 
} 

.gridview { 
    width: 100%; 
    /*word-wrap:break-word;*/ 
    table-layout: fixed; 
} 

#body { 
    background-color: #efeeef; 
    clear: both; 
    padding-bottom: 35px; 
} 

    .main-content { 
     background: url("../Images/accent.png") no-repeat; 
     padding-left: 10px; 
     padding-top: 30px; 
    } 

    .featured + .main-content { 
     background: url("../Images/heroAccent.png") no-repeat; 
    } 

header .content-wrapper { 
    padding-top: 20px; 
} 

footer { 
    clear: both; 
    background-color: #e2e2e2; 
    font-size: .8em; 
    height: 100px; 
} 


/* site title 
----------------------------------------------------------*/ 
.site-title { 
    color: #c8c8c8; 
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace; 
    font-size: 2.3em; 
    margin: 0; 
} 

.site-title a, .site-title a:hover, .site-title a:active { 
    background: none; 
    color: #c8c8c8; 
    outline: none; 
    text-decoration: none; 
} 


/* login 
----------------------------------------------------------*/ 
#login { 
    display: block; 
    font-size: .85em; 
    margin: 0 0 10px; 
    text-align: right; 
} 

    #login a { 
     background-color: #d3dce0; 
     margin-left: 10px; 
     margin-right: 3px; 
     padding: 2px 3px; 
     text-decoration: none; 
    } 

    #login a.username { 
     background: none; 
     margin-left: 0px; 
     text-decoration: underline; 
    } 

    #login ul { 
     margin: 0; 
    } 

    #login li { 
     display: inline; 
     list-style: none; 
    } 


/* menu 
----------------------------------------------------------*/ 
ul#menu { 
    font-size: 1.3em; 
    font-weight: 600; 
    margin: 0 0 5px; 
    padding: 0; 
    text-align: right; 
} 

    ul#menu li { 
     display: inline; 
     list-style: none; 
     padding-left: 15px; 
    } 

     ul#menu li a { 
      background: none; 
      color: #999; 
      text-decoration: none; 
     } 

     ul#menu li a:hover { 
      color: #333; 
      text-decoration: none; 
     } 


/* page elements 
----------------------------------------------------------*/ 
/* featured */ 
.featured { 
    background-color: #fff; 
} 

    .featured .content-wrapper { 
     background-color: #7ac0da; 
     background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
     background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
     background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6)); 
     background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
     background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
     color: #3e5667; 
     padding: 20px 40px 30px 40px; 
    } 

     .featured hgroup.title h1, .featured hgroup.title h2 { 
      color: #fff; 
     } 

     .featured p { 
      font-size: 1.1em; 
     } 

/* page titles */ 
hgroup.title { 
    margin-bottom: 10px; 
} 

hgroup.title h1, hgroup.title h2 { 
    display: inline; 
} 

hgroup.title h2 { 
    font-weight: normal; 
    margin-left: 3px; 
} 

/* features */ 
section.feature { 
    width: 300px; 
    float: left; 
    padding: 10px; 
} 

/* ordered list */ 
ol.round { 
    list-style-type: none; 
    padding-left: 0; 
} 

    ol.round li { 
     margin: 25px 0; 
     padding-left: 45px; 
    } 

     ol.round li.zero { 
      background: url("../Images/orderedList0.png") no-repeat; 
     } 

     ol.round li.one { 
      background: url("../Images/orderedList1.png") no-repeat; 
     } 

     ol.round li.two { 
      background: url("../Images/orderedList2.png") no-repeat; 
     } 

     ol.round li.three { 
      background: url("../Images/orderedList3.png") no-repeat; 
     } 

     ol.round li.four { 
      background: url("../Images/orderedList4.png") no-repeat; 
     } 

     ol.round li.five { 
      background: url("../Images/orderedList5.png") no-repeat; 
     } 

     ol.round li.six { 
      background: url("../Images/orderedList6.png") no-repeat; 
     } 

     ol.round li.seven { 
      background: url("../Images/orderedList7.png") no-repeat; 
     } 

     ol.round li.eight { 
      background: url("../Images/orderedList8.png") no-repeat; 
     } 

     ol.round li.nine { 
      background: url("../Images/orderedList9.png") no-repeat; 
     } 

/* content */ 
article { 
    float: left; 
    width: 70%; 
} 

aside { 
    float: right; 
    width: 25%; 
} 

    aside ul { 
     list-style: none; 
     padding: 0; 
    } 

     aside ul li { 
      background: url("../Images/bullet.png") no-repeat 0 50%; 
      padding: 2px 0 2px 20px; 
     } 

.label { 
    font-weight: 700; 
} 

/* login page */ 
#loginForm { 
    border-right: solid 2px #c8c8c8; 
    float: left; 
    width: 55%; 
} 

    #loginForm .validation-error { 
     display: block; 
     margin-left: 15px; 
    } 

#socialLoginForm { 
    margin-left: 40px; 
    float: left; 
    width: 40%; 
} 

    #socialLoginForm h2 { 
     margin-bottom: 5px; 
    } 

fieldset.open-auth-providers { 
    margin-top: 15px; 
} 

    fieldset.open-auth-providers button { 
     margin-bottom: 12px; 
    } 

/* contact */ 
.contact h3 { 
    font-size: 1.2em; 
} 

.contact p { 
    margin: 5px 0 0 10px; 
} 

.contact iframe { 
    border: 1px solid #333; 
    margin: 5px 0 0 10px; 
} 

/* forms */ 
fieldset { 
    border: none; 
    margin: 0; 
    padding: 0; 
} 

    fieldset legend { 
     display: none; 
    } 

    fieldset ol { 
     padding: 0; 
     list-style: none; 
    } 

     fieldset ol li { 
      padding-bottom: 5px; 
     } 

    label { 
     display: block; 
     font-size: 1.2em; 
     font-weight: 600; 
    } 

    label.checkbox { 
     display: inline; 
    } 

    input, textarea { 
     border: 1px solid #e2e2e2; 
     background: #fff; 
     color: #333; 
     font-size: 1.2em; 
     margin: 5px 0 6px 0; 
     padding: 5px; 
     width: 300px; 
    } 

    textarea { 
     font-family: inherit; 
     width: 500px; 
    } 

     input:focus, textarea:focus { 
      border: 1px solid #7ac0da; 
     } 

     input[type="checkbox"] { 
      background: transparent; 
      border: inherit; 
      width: auto; 
     } 

    input[type="submit"], 
    input[type="button"], 
    button { 
     background-color: #d3dce0; 
     border: 1px solid #787878; 
     cursor: pointer; 
     font-size: 1.2em; 
     font-weight: 600; 
     padding: 7px; 
     margin-right: 8px; 
     width: auto; 
    } 

    td input[type="submit"], 
    td input[type="button"], 
    td button { 
     font-size: 1em; 
     padding: 4px; 
     margin-right: 4px; 
    } 

/* info and errors */ 
.message-info { 
    border: 1px solid; 
    clear: both; 
    padding: 10px 20px; 
} 

.message-error { 
    clear: both; 
    color: #e80c4d; 
    font-size: 1.1em; 
    font-weight: bold; 
    margin: 20px 0 10px 0; 
} 

.message-success { 
    color: #7ac0da; 
    font-size: 1.3em; 
    font-weight: bold; 
    margin: 20px 0 10px 0; 
} 

.error { 
    color: #e80c4d; 
} 

/* styles for validation helpers */ 
.field-validation-error { 
    color: #e80c4d; 
    font-weight: bold; 
} 

.field-validation-valid { 
    display: none; 
} 

input.input-validation-error { 
    border: 1px solid #e80c4d; 
} 

input[type="checkbox"].input-validation-error { 
    border: 0 none; 
} 

.validation-summary-errors { 
    color: #e80c4d; 
    font-weight: bold; 
    font-size: 1.1em; 
} 

.validation-summary-valid { 
    display: none; 
} 

/* tables 
----------------------------------------------------------*/ 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    margin-top: 0.75em; 
    border: 0 none; 
} 

th { 
    font-size: 1.2em; 
    text-align: left; 
    border: none 0px; 
    padding-left: 0; 
} 

    th a { 
     display: block; 
     position: relative; 

    } 

    th a:link, th a:visited, th a:active, th a:hover { 
     color: #333; 
     font-weight: 600; 
     text-decoration: none; 
     padding: 0; 
    } 

    th a:hover { 
     color: #000; 
    } 

    th.asc a, th.desc a { 
     margin-right: .75em; 
    } 

    th.asc a:after, th.desc a:after { 
     display: block; 
     position: absolute; 
     right: 0em; 
     top: 0; 
     font-size: 0.75em; 
    } 

    th.asc a:after { 
     content: '▲'; 
    } 

    th.desc a:after { 
     content: '▼'; 
    } 

td { 
    padding: 0.25em 2em 0.25em 0em; 
    border: 0 none; 
} 

tr.pager td { 
    padding: 0 0.25em 0 0; 
} 


/******************** 
* Mobile Styles * 
********************/ 
@media only screen and (max-width: 850px) { 

    /* header 
    ----------------------------------------------------------*/ 
    header .float-left, 
    header .float-right { 
     float: none; 
    } 

    /* logo */ 
    header .site-title { 
     margin: 10px; 
     text-align: center; 
    } 

    /* login */ 
    #login { 
     font-size: .85em; 
     margin: 0 0 12px; 
     text-align: center; 
    } 

     #login ul { 
      margin: 5px 0; 
      padding: 0; 
     } 

     #login li { 
      display: inline; 
      list-style: none; 
      margin: 0; 
      padding: 0; 
     } 

     #login a { 
      background: none; 
      color: #999; 
      font-weight: 600; 
      margin: 2px; 
      padding: 0; 
     } 

     #login a:hover { 
      color: #333; 
     } 

    /* menu */ 
    nav { 
     margin-bottom: 5px; 
    } 

    ul#menu { 
     margin: 0; 
     padding: 0; 
     text-align: center; 
    } 

     ul#menu li { 
      margin: 0; 
      padding: 0; 
     } 


    /* main layout 
    ----------------------------------------------------------*/ 
    .main-content, 
    .featured + .main-content { 
     background-position: 10px 0; 
    } 

    .content-wrapper { 
     padding-right: 10px; 
     padding-left: 10px; 
    } 

    .featured .content-wrapper { 
     padding: 10px; 
    } 

    /* page content */ 
    article, aside { 
     float: none; 
     width: 100%; 
    } 

    /* ordered list */ 
    ol.round { 
     list-style-type: none; 
     padding-left: 0; 
    } 

     ol.round li { 
      padding-left: 10px; 
      margin: 25px 0; 
     } 

      ol.round li.zero, 
      ol.round li.one, 
      ol.round li.two, 
      ol.round li.three, 
      ol.round li.four, 
      ol.round li.five, 
      ol.round li.six, 
      ol.round li.seven, 
      ol.round li.eight, 
      ol.round li.nine { 
       background: none; 
      } 

    /* features */ 
    section.feature { 
     float: none; 
     padding: 10px; 
     width: auto; 
    } 

     section.feature img { 
      color: #999; 
      content: attr(alt); 
      font-size: 1.5em; 
      font-weight: 600; 
     } 

    /* forms */ 
    input { 
     width: 90%; 
    } 



    /* login page */ 
    #loginForm { 
     border-right: none; 
     float: none; 
     width: auto; 
    } 

     #loginForm .validation-error { 
      display: block; 
      margin-left: 15px; 
     } 

    #socialLoginForm { 
     margin-left: 0; 
     float: none; 
     width: auto; 
    } 

    /* footer 
    ----------------------------------------------------------*/ 
    footer .float-left, 
    footer .float-right { 
     float: none; 
    } 

    footer { 
     text-align: center; 
     height: auto; 
     padding: 10px 0; 
    } 

     footer p { 
      margin: 0; 
     } 
} 
/* END: Mobile Styles */ 

的ASPX代碼：

<asp:RadioButtonList runat="server" ID="rblRecordStatus" RepeatDirection="Horizontal" AutoPostBack="true" 
     OnSelectedIndexChanged="rblRecordStatus_SelectedIndexChanged" TextAlign="Left"> 
     <asp:ListItem>ALL</asp:ListItem> 
     <asp:ListItem>Active</asp:ListItem> 
     <asp:ListItem>Completed</asp:ListItem> 
     <asp:ListItem>On Hold</asp:ListItem> 
    </asp:RadioButtonList> 

Answer 1

我已經能夠做到你想要什麼用下面的代碼：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
<asp:RadioButtonList runat="server" ID="rblRecordStatus" RepeatDirection="Vertical" AutoPostBack="true" 
    OnSelectedIndexChanged="rblRecordStatus_SelectedIndexChanged" TextAlign="Right" CssClass="inline-rb"> 
    <asp:ListItem>ALL</asp:ListItem> 
    <asp:ListItem>Active</asp:ListItem> 
    <asp:ListItem>Completed</asp:ListItem> 
    <asp:ListItem>On Hold</asp:ListItem> 
</asp:RadioButtonList> 

（注意'TextAlign'和'CssClass'已更改）。

在* .css文件：

.inline-rb input[type="radio"] { 
    width: auto; 
} 

.inline-rb label { 
    display: inline; 
} 

而結果：

Answer 2

在我的情況下面的CSS樣式幫助：

.RadioButtonList 
{ 
    vertical-align:super; 
    margin-top: -1px; 
} 

也許這將幫助別人。