如何将按钮完全浮动？
我已经尝试过将其向右移动，并将位置更改为绝对位置，但我没有把按钮推到文本区域的右边缘。
#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 />
<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>
答案 0 :(得分：1)
删除submitcontainer上的宽度。这将导致Post按钮一直向右浮动。但是，这不会导致它与文本框对齐，因为文本框是自动调整大小的。如果你想让事情按照你的意愿工作，你可能想要“Write Something”文本和文本输入的另一个div，其指定宽度与submitcontainer div的宽度相匹配。
答案 1 :(得分：0)
快速修复。使用margin-right的负值来修复它。
#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;
}
.submitcontainer
{ position: relative; width: 300px; top:0; float:right!important; margin-right: -135px;
}<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 />
<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>
答案 2 :(得分：0)
我在德文的一些提示发布并扩展了这个概念之后找到了答案。我做的是放置一个宽度为90％的包装 .stringclassic 并将所有子项放在里面并相应地浮动它们。查看我的代码以获取更多信息或小提琴。希望我能帮助其他人寻找这些信息。
谢谢大家！
http://jsfiddle.net/L0f48606/1/
<div class="sharepagetab sharewrapper activeshare" id="ashare">
<div class="allshares">
<div class="shares">
<div class='stringsharewrapper'>
<div class="stringclassic">
<span class="stringtitle">Write Something</span> <br />
<textarea class="writestring" onKeyUp="textCounter2(this,'counter',150);"></textarea>
<br />
<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>
</div>
</div>
</div>
</div>
CSS：
#counter { float:left; position:relative; margin-left:20px; margin-top:5px;}
.stringsharewrapper { width:100%; height:auto; margin-top:10px; background:pink; position:relative;}
.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; float:left; position:relative; 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---------------*/
.stringclassic { width:90%; left:20px; height:80px; position:relative; margin-top:1px; float:left; }
.writestring { width:100%; height:80px; position:relative; margin-top:10px; }
.submitcontainer
{
position: relative; margin-right:90px;
top:0; float:right; display:inline-block;
}