HTML5 按钮不会与文本区域的最右侧对齐

Question

如何让按钮一直 float ？

我试过一切让它正确 float ，并将位置更改为绝对位置，但我没有运气将按钮推到文本区域的右边缘。

http://jsfiddle.net/hz0fo895/

#counter { float:left; position:relative; margin-left:20px; margin-top:5px;}

.stringsharewrapper { width:100%; height:auto; margin-top:10px; }

.writestring { width:90%; left:20px; height:80px; position:relative; margin-top:10px; }

.stringtitle { color:black; font-family:arial; font-family: Helvetica, Arial, "Sans Serif"; font-size:20px;  font-weight:bold;  margin-left:20px; margin-top:5px;}



/*----------Filter Button 1 ------------*/

#stringbutton2[type=checkbox]
{
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
[for="stringbutton2"]
{
	background: #EEE;
	background: linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
	background: -moz-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
	background: -ms-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
	background: -o-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFBF00),color-stop(100%,#FE9A2E));
	background: -webkit-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
	border: 1px solid #CCC;
	border-radius: 5px;
	box-shadow: inset 0px 0px 1px 0px #FFF;
	color: #000;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBF00',endColorstr='#FE9A2E',GradientType=0);
	font-family: Helvetica,Arial,"Sans Serif";
	font-size: 13px;
	font-weight: bold;
	left: 5%;
	moz-border-radius: 5px;
	moz-box-shadow: inset 0px 0px 1px 0px #FFF;
	padding: 0;
	padding: 6px;
	position: absolute;
	text-align: center;
	text-shadow: 1px 1px 1px #DDD;
	top: 4px;
	webkit-border-radius: 5px;
	webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
	width: 100px;
}
[for="stringbutton2"]:hover
{
	background: #CCC;
	background: -moz-linear-gradient(top,#0B2F3A 0%,#100719 100%);
	background: -ms-linear-gradient(top,#0B2F3A 0%,#100719 100%);
	background: -o-linear-gradient(top,#0B2F3A 0%,#100719 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0B2F3A),color-stop(100%,#100719));
	background: -webkit-linear-gradient(top,#0B2F3A 0%,#100719 100%);
	border-color: #BBB;
	color: #FFFFFF;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B2F3A',endColorstr='#100719',GradientType=0);
	font-weight: bold;
}
[for="stringbutton2"] span.filterswitch:last-of-type
{
	display: none;
	visibility: hidden;
}
#stringbutton2[type=checkbox]:checked
{
	color: #FFA317;
}
#stringbutton2[type=checkbox]:checked~ .filtercontent
{
	display: block;
	visibility: visible; 
	width: 100%;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:first-of-type
{
	display: none;
	visibility: hidden;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:last-of-type
{
	color: #3CC;
	display: block; 
	visibility: visible;
}


/*-------------Filter Button Container---------------*/
.submitcontainer
{
	position: relative;
	width: 300px; top:0; float:right;   
}

<div class="sharepagetab sharewrapper activeshare" id="ashare">
                     <div class="allshares">        
                      <div class="shares">
					  
			<div class='stringsharewrapper'>
								
                <span class="stringtitle">Write Something</span><br />
                <textarea class="writestring" onKeyUp="textCounter2(this,'counter',150);"></textarea>
				<br />&nbsp; 
				
				<input disabled class="charInput" size="3" value="150" id="counter">
				
				<!----------Write button------------>
                  <div class="submitcontainer">    

				  
                    <input onclick="toggleContent()" type="checkbox" id="stringbutton2" class="cfilterbutton" role="button">
                    <label for="stringbutton2" onclick="">
                    <span class="filterswitch">Post</span>
                    <span class="filterswitch">Post</span> 
                    </label>
               
                  </div><!----End Filtercontainer------->
				
				
            </div>

Answer 1

移除 submitcontainer 的宽度。这将导致 Post 按钮一直 float 。然而，这不会导致它与您的文本框对齐，因为文本框正在自动调整大小。如果您希望事情按您的意愿工作，您可能需要另一个 div 围绕“Write Something”文本和具有指定宽度的文本输入，该宽度与您的 submitcontainer div 的宽度相匹配。