asp:radiobuttonlist css 样式
Posted
技术标签:
【中文标题】asp:radiobuttonlist css 样式【英文标题】:asp:radiobuttonlist css style 【发布时间】:2013-12-10 10:10:20 【问题描述】:我使用默认的 .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>
【问题讨论】:
您能否提供生成的单选按钮列表的 HTML 源代码?由于 css 正在为此工作。 查看此解决方案:***.com/questions/17670479/… 【参考方案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;
结果:
【讨论】:
【参考方案2】:在我的例子中,下面的 CSS 样式有帮助:
.RadioButtonList
vertical-align:super;
margin-top: -1px;
也许它会对某人有所帮助。
【讨论】:
【参考方案3】:<asp:RadioButton runat="server" ID="RadioButton9" CssClass="radiobtn" Text="Get" />
CSS
.radiobtn input[type="radio"]
width: 30px;
Height: 30px;
【讨论】:
一般来说,如果答案包含对代码的用途的解释,以及为什么在不介绍其他人的情况下解决问题的原因,答案会更有帮助。以上是关于asp:radiobuttonlist css 样式的主要内容,如果未能解决你的问题,请参考以下文章