Question

按钮很好，直到我将窗口调整到很小或在我的情况下，在手机等小屏幕设备上查看网站。

我想要两个不同的场景。其中一个区域包含宽度相等的按钮但是当我按下窗口大小时按钮的内容溢出按钮。我还想要另一个区域，其按钮可以调整到文本的大小。在这种情况下，文本不会从按钮溢出，但现在按钮溢出div区域我正在尝试我能想到的一切，这就是为什么一个区域使用<a href=""></a>而另一个区域使用<button></button>的原因这两种情况都在小提琴http://jsfiddle.net/leopardy/VFNmC/

中

enter image description here

小提琴的代码： HTML

<div class="combo">
<div id="button-area-1"> 
    <div><a href=""  class="btn btn-default btn-xs btn-no-width">txt <span class="glyphicon glyphicon-circle-arrow-right"></span></a></div>
    <div><a href=""  class="btn btn-default btn-xs btn-no-width">txt txt <span class="glyphicon glyphicon-circle-arrow-right"></span></a></div>
    <div><a href=""  class="btn btn-default btn-xs btn-no-width">txt txt txt <span class="glyphicon glyphicon-circle-arrow-right"></span></a></div>
    <div><a href=""  class="btn btn-default btn-xs btn-no-width">txt txt txt txt <span class="glyphicon glyphicon-circle-arrow-right"></span></a></div>
</div>

<div id="button-area-2">
    <button type="button" class="btn btn-default btn-xs btn-has-width">hi<span class="glyphicon glyphicon-circle-arrow-right"></span></button>
    <button type="button" class="btn btn-default btn-xs btn-has-width">hi hi<span class="glyphicon glyphicon-circle-arrow-right"></span></button>
    <button type="button" class="btn btn-default btn-xs btn-has-width">hi hi hi<span class="glyphicon glyphicon-circle-arrow-right"></span></button>
    <button type="button" class="btn btn-default btn-xs btn-has-width">hi hi hi hi<span class="glyphicon glyphicon-circle-arrow-right"></span></button>
</div>
</div>

CSS

    .combo {
       position: relative;
       width: 100%;
       height: 400px;
       background-color: blue;
    }

    #button-area-1 {
       position:absolute;
       top:40%;
       left:60%;
       z-index: 2;
       background-color: #606060;
       background-color: rgba(96,96,96,0.5);
       border: 1px solid grey;
       outline: 1px solid darkgrey;
       width: 30%;
       padding-top: 1%;
       padding-bottom: 1%;
    }

    #button-area-2 {
       position:absolute;
       top:5%;
       left:60%;
       z-index: 2;
       background-color: @medium-gray;
       background-color: rgba(96,96,96,0.5);
       border: 1px solid grey;
       outline: 1px solid darkgrey;
       width: 30%;
       padding-top: 1%;
       padding-bottom: 1%;
    }

    .btn-no-width {
      margin-top:1%;
      margin-left: 10%;
      margin-right: 10%;
      -webkit-font-smoothing: antialiased;
      background-repeat: repeat-x;
    }

    .btn-has-width {
      width: 80%;
      margin-top:1%;
      margin-left: 10%;
      margin-right: 10%;
      -webkit-font-smoothing: antialiased;
      background-repeat: repeat-x;
    }

Answer 1

您需要为min-width和#button-area-1设置#button-area-2（150px应该为您的示例做）。但请记住，这不适用于IE6或更低版本（不喜欢它仍在使用中）。

窗口大小调整会导致文本溢出自举按钮边界或按钮溢出div区域

1 个答案: