复选框/单选按钮换行问题

时间：2016-09-09 18:21:51

标签： html css

当有换行时，我正试图阻止标签和复选框（或单选按钮）的分离。不幸的是，我正在处理一些我无法控制的很长的标签。

如果可能存在所有按钮对齐的列，那将是非常棒的，但至少不会分割项目。

提前感谢。

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

.html_S {
	height: 100%;

}
.toast {
    opacity: 1 !important;
}
.body_S {
    min-height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
	font-family: montserrat, arial, verdana;
	background-color: transparent !important;
}

.reqSpan_S {
    top: -15px;
	position:relative;
}

.reqFieldText_S {
    color: red;
    padding: 0;
    margin: 0;
}

.reqFieldStar_S {
    font-weight: bold;
}
.k-button {
   color: red;
}

.buttonCentre_S {
    text-align: center;
}

.outerDiv_S {
    width: 85%;
    margin: 50px auto;
    text-align: center;
}
#surveyForm {
	top: -35px;
	position:relative;
    width: 85%;
	margin: 50px auto;
	text-align: left;
}
#surveyForm fieldset {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;
	
	box-sizing: border-box;
	width: 80%;
	margin: 0 10%;
}

/*inputs*/
#surveyForm input, #surveyForm textarea {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
}
/*buttons*/
#surveyForm .action-button {
    text-align: center;
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
#surveyForm .action-button:hover, #surveyForm .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#surveyForm .action-button-submit {
	width: 100px;
	background: #3498db;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}

/*For Toast not part of surveyForm...*/
.action-button-ok {
	width: 100px;
	background: rgba(255, 255, 255, 0.3);
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}

#surveyForm .action-button-submit:hover, #surveyForm .action-button-submit:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #3498db;
}
/*headings*/
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;

	/* width should be 100 divided by the number of steps */
	/* this is set in the code dynamically in javascript */
	width: 6.25%;

	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}

.k-dropdown {
    width: 100%;
}
.k-state-selected.k-state-focused {
    background-color: #27AE60;
    border: 0;
}

#surveyForm hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	margin-bottom: 10px;
}


/*  https://stackoverflow.com/a/17541916/1550052   */


.rad,
.ckb{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  padding: 10px;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
  visibility: hidden;
  position: absolute;
}
/* RADIO & CHECKBOX STYLES */
.rad > i,
.ckb > i{     /* DEFAULT <i> STYLE */
  display: inline-block;
  vertical-align: middle;
  width:  16px;
  height: 16px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 1px solid #d3d3d3;
  background: #666;
  margin-right: 4px;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
  width: 25px;
  border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: #666;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: #27AE60;
}
/* CHECKBOX */
.ckb > input + i:after{
  content: "";
  display: block;
  height: 12px;
  width:  12px;
  margin: 2px;
  border-radius: inherit;
  transition: inherit;
  background: #d3d3d3;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
  margin-left: 11px;
  background:  #27AE60; 
}
<body  class='body_S'>	


	<form id='surveyForm'>
        

        
		<!-- fieldsets -->
		<fieldset >
<h2 class="fs-title">
	Demographic Search Criteria 
</h2>
<h2 class="fs-subtitle">
	The demographic data you select here will be used by planners
</h2>
<h2 class="fs-subtitle">
	1
</h2>
<label>Main Type of Business
</label>
<br />

<label class="ckb" for="cb-638-0">
<input type="checkbox" name="cb-638" id="cb-638-0" value="3223" />

<i></i>Accommodations
</label>
<label class="ckb" for="cb-638-1">
<input type="checkbox"  name="cb-638" id="cb-638-1" value="3224" />

<i></i>Activities, Attractions & Tours
</label>
<label class="ckb" for="cb-638-2">
<input type="checkbox"  name="cb-638" id="cb-638-2" value="3225" />

<i></i>Association
</label>
<label class="ckb" for="cb-638-3">
<input type="checkbox"  name="cb-638" id="cb-638-3" value="3226" />

<i></i>Convention and Visitors Bureau
</label>
<label class="ckb" for="cb-638-4">
<input type="checkbox" name="cb-638" id="cb-638-4" value="3227" />

<i></i>Convention Centre
</label>
<label class="ckb" for="cb-638-5">
<input type="checkbox"  name="cb-638" id="cb-638-5" value="3228" />

<i></i>Cruise Line
</label>
<label class="ckb" for="cb-638-6">
<input type="checkbox"  name="cb-638" id="cb-638-6" value="3229" />

<i></i>Destination Management Company
</label>
<label class="ckb" for="cb-638-7">
<input type="checkbox"  name="cb-638" id="cb-638-7" value="3230" />

<i></i>Destination Marketing Organization
</label>
<label class="ckb" for="cb-638-8">
<input type="checkbox"  name="cb-638" id="cb-638-8" value="3231" />

<i></i>Event Service Provider
</label>
<label class="ckb" for="cb-638-9">
<input type="checkbox"  name="cb-638" id="cb-638-9" value="3232" />

<i></i>Technology Provider
</label>
<label class="ckb" for="cb-638-10">
<input type="checkbox" name="cb-638" id="cb-638-10" value="3233" />

<i></i>Transportation
</label>
<label class="ckb" for="cb-638-11">
<input type="checkbox"  name="cb-638" id="cb-638-11" value="3234" />

<i></i>Tourism Board
</label>
<label class="ckb" for="cb-638-12">
<input type="checkbox"  name="cb-638" id="cb-638-12" value="3235" />

<i></i>Venues for Meeting/Events (non-hotel)
</label>




</fieldset>



        
	</form>	
</body>
</html>

选择组的css从css部分的第207行开始。它来自这个堆栈溢出解决方案：https://stackoverflow.com/a/17541916/155005

2 个答案:

答案 0 :(得分：1)

添加浮动：左;你标签标签

＆＃13;
＆＃13; 
@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

.html_S {
	height: 100%;

}
.toast {
    opacity: 1 !important;
}
.body_S {
    min-height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
	font-family: montserrat, arial, verdana;
	background-color: transparent !important;
}

.reqSpan_S {
    top: -15px;
	position:relative;
}

.reqFieldText_S {
    color: red;
    padding: 0;
    margin: 0;
}

.reqFieldStar_S {
    font-weight: bold;
}
.k-button {
   color: red;
}

.buttonCentre_S {
    text-align: center;
}

.outerDiv_S {
    width: 85%;
    margin: 50px auto;
    text-align: center;
}
#surveyForm {
	top: -35px;
	position:relative;
    width: 85%;
	margin: 50px auto;
	text-align: left;
}
#surveyForm fieldset {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;
	
	box-sizing: border-box;
	width: 80%;
	margin: 0 10%;
}

/*inputs*/
#surveyForm input, #surveyForm textarea {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
}
/*buttons*/
#surveyForm .action-button {
    text-align: center;
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
#surveyForm .action-button:hover, #surveyForm .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#surveyForm .action-button-submit {
	width: 100px;
	background: #3498db;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}

/*For Toast not part of surveyForm...*/
.action-button-ok {
	width: 100px;
	background: rgba(255, 255, 255, 0.3);
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}

#surveyForm .action-button-submit:hover, #surveyForm .action-button-submit:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #3498db;
}
/*headings*/
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;

	/* width should be 100 divided by the number of steps */
	/* this is set in the code dynamically in javascript */
	width: 6.25%;

	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}

.k-dropdown {
    width: 100%;
}
.k-state-selected.k-state-focused {
    background-color: #27AE60;
    border: 0;
}

#surveyForm hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	margin-bottom: 10px;
}


/*  http://stackoverflow.com/a/17541916/1550052   */


.rad,
.ckb{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  padding: 10px;
  clear: left;
  float: left;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
  visibility: hidden;
  position: absolute;
}
/* RADIO & CHECKBOX STYLES */
.rad > i,
.ckb > i{     /* DEFAULT <i> STYLE */
  display: inline-block;
  vertical-align: middle;
  width:  16px;
  height: 16px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 1px solid #d3d3d3;
  background: #666;
  margin-right: 4px;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
  width: 25px;
  border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: #666;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: #27AE60;
}
/* CHECKBOX */
.ckb > input + i:after{
  content: "";
  display: block;
  height: 12px;
  width:  12px;
  margin: 2px;
  border-radius: inherit;
  transition: inherit;
  background: #d3d3d3;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
  margin-left: 11px;
  background:  #27AE60; 
}
＆＃13; 
<body  class='body_S'>	


	<form id='surveyForm'>
        

        
		<!-- fieldsets -->
		<fieldset >
<h2 class="fs-title">
	Demographic Search Criteria for iBE Appointment Scheduler For Your Company Profile
</h2>
<h2 class="fs-subtitle">
	The demographic data you select here will be used by planners to help search and identify exhibitors they want to request meetings with. The data you fill in will default on all your booth staff members' profiles, however they can 
edit the selections to customize it to what they offer if it differs from what you offer.
</h2>
<h2 class="fs-subtitle">
	1
</h2>
<label>Main Type of Business
</label>
<br />

<label class="ckb" for="cb-638-0">
<input type="checkbox" name="cb-638" id="cb-638-0" value="3223" />

<i></i>Accommodations
</label>
<label class="ckb" for="cb-638-1">
<input type="checkbox"  name="cb-638" id="cb-638-1" value="3224" />

<i></i>Activities, Attractions & Tours
</label>
<label class="ckb" for="cb-638-2">
<input type="checkbox"  name="cb-638" id="cb-638-2" value="3225" />

<i></i>Association
</label>
<label class="ckb" for="cb-638-3">
<input type="checkbox"  name="cb-638" id="cb-638-3" value="3226" />

<i></i>Convention and Visitors Bureau
</label>
<label class="ckb" for="cb-638-4">
<input type="checkbox" name="cb-638" id="cb-638-4" value="3227" />

<i></i>Convention Centre
</label>
<label class="ckb" for="cb-638-5">
<input type="checkbox"  name="cb-638" id="cb-638-5" value="3228" />

<i></i>Cruise Line
</label>
<label class="ckb" for="cb-638-6">
<input type="checkbox"  name="cb-638" id="cb-638-6" value="3229" />

<i></i>Destination Management Company
</label>
<label class="ckb" for="cb-638-7">
<input type="checkbox"  name="cb-638" id="cb-638-7" value="3230" />

<i></i>Destination Marketing Organization
</label>
<label class="ckb" for="cb-638-8">
<input type="checkbox"  name="cb-638" id="cb-638-8" value="3231" />

<i></i>Event Service Provider
</label>
<label class="ckb" for="cb-638-9">
<input type="checkbox"  name="cb-638" id="cb-638-9" value="3232" />

<i></i>Technology Provider
</label>
<label class="ckb" for="cb-638-10">
<input type="checkbox" name="cb-638" id="cb-638-10" value="3233" />

<i></i>Transportation
</label>
<label class="ckb" for="cb-638-11">
<input type="checkbox"  name="cb-638" id="cb-638-11" value="3234" />

<i></i>Tourism Board
</label>
<label class="ckb" for="cb-638-12">
<input type="checkbox"  name="cb-638" id="cb-638-12" value="3235" />

<i></i>Venues for Meeting/Events (non-hotel)
</label>




</fieldset>



        
	</form>	
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

如果你想特别防止label元素中的换行符，那就有CSS：

label.chk, label.rad {
  white-space:nowrap;
}

<小时/> 如果你想允许换行，但是如果它们出现在控件和标签的开头之间，你可以像这样调整你的代码：

.nowrap {
  white-space:nowrap;
}

<label class="ckb" for="cb-638-1">
<span class="nowrap"><input type="checkbox"  name="cb-638" id="cb-638-1" value="3224" />
<i></i>Activities,</span> Attractions & Tours
</label>

（您还需要修改.chk > ...和.rad > ...规则以考虑额外的span。）

<小时/> 如果您对仅为柱状的标签感到满意，只需将label设为块级元素：

label {
  display:block;
}
相关问题
最新问题