堆栈内存溢出
  繁体   English   中英

HTML 5按钮不会与文本区域的最右边对齐

[英]HTML 5 Button wont align to the far right of text area

 原文  2015-01-26 22:59:34  7   3    html/ css/ html5/ css3

问题描述

我怎样才能完全将按钮浮动？

我已经尝试过一切将其浮动到正确的位置，并将其位置更改为绝对值，但是我没有运气将按钮推到文本区域的右边缘。

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>

3 个解决方案

解决方案1
 1  2015-01-26 23:11:27

删除submitcontainer上的宽度。 这将导致“发布”按钮一直向右浮动。 但是，由于文本框正在自动调整大小，因此这不会导致其与文本框对齐。 如果您希望事情按需要进行，您可能希望在“ Write Something”文本和输入宽度与您的Submitcontainer div宽度匹配的文本输入周围添加另一个div。

解决方案2
 0  2015-01-26 23:09:34

快速解决。 使用负的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 />&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>

解决方案3
 0  2015-01-27 01:44:01

我根据Devon发布的一些技巧并扩展了该概念找到了答案。 我所做的是将一个包装器.stringclassic设置为90％的宽度，并将所有子级放入其中，并相应地将它们浮动。 查看我的代码以获取更多信息或摆弄。 希望我可以帮助其他人查找此信息。

谢谢你们！

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 />&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>


                    </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; 
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在文本区域输入的右侧对齐按钮？ 文字不对齐 按钮文本无法正确对齐 如何将按钮与文本区域对齐 如何将文本区域的标签对齐到顶部和右侧？ HTML用按钮将文本对齐 如何在html中右对齐按钮 如何对齐HTML / JavaScript列表最左边的项目和最右边的项目？ HTML将文本对齐到图像的右边？ HTML文字作为工具提示，向右对齐
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM