动态调整按钮大小

Question

这是我的JsFiddle代码。现在我的按钮大小已定义，但我想根据文本动态调整按钮大小。我该怎么做才能动态调整按钮大小？我想通过javascript

来做

 <div id="wrapper">
        <div id="mainContainer">
            <p class="copyrights" id="copyrights"></p>
            <div>
                <img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
            </div>
                  <div id="headlineText">
            <p id="headline1Txt" >Sample bag1</p>
            <p id="headline2Txt" >Sale Price $25</p>
            <p id="headline3Txt" >Sale $14<p>
        </div>
            <div id="disclaimer" >
               Details*
            </div>
              <div id="Image_logo">
                <img id="Imglogo" src="http://i.share.pho.to/e114a8e1_c.png" />
            </div>

           <div >
           <button class="btn btn-primary" type="button"  id="ctaBtn"><div id="fadeIn" >  Learn More Now </div></button>

        </div>
    </div>
    </div>

Answer 1

您可以使用检查窗口大小的检查系统，然后根据您的想法设置按钮宽度高度。因此，对于检查窗口大小，您可以使用此代码，之后按按钮大小添加/ sub / div此值..

 function widthheight()

    {
    var w=window.outerWidth;
    var h=window.outerHeight;
    var button="Window size: width=" + w + ", height=" + h;
    document.getElementById("demo").innerHTML=txt;
    }

可能是我的想法帮助你 谢谢

Answer 2

不要在CSS中的按钮上设置width属性。它的大小将自动适合您的文本。

更新了小提琴here。