在更小的屏幕尺寸下移动到新行的HTML元素（按钮）

我有一系列div（包含按钮），它们在大屏幕尺寸下都在同一行上。当我使屏幕变得越来越小时，最右边的按钮被推到一条新线上，而不是像其他按钮一样保持在同一条线上。见下文（大屏幕尺寸的PIC1，小屏幕尺寸的PIC2）图片在更小的屏幕尺寸下移动到新行的HTML元素（按钮）

PIC1：

PIC2：

和我的html：

<div class="col-xs-12 clearfix"> 
    <div class="col-xs-4" style="padding-left: 290px"> 
     <button class="btn btn-default" ng-click="createProject()">New 
      Project</button> 

    </div> 
    <div class="col-xs-4" align="center" 
     ng-controller="CsvImportController" 
     style="display: inline-block; padding-left: 200px"> 

     <a href="#" class="btn btn-default btn-file" 
      onclick="document.getElementById('fileBrowser').click(); return false;"> 
      Select CSV File </a> 
     <input id="fileBrowser" style="visibility: hidden;" 
      class="btn btn-default btn-file" type="file" file-input="files" /> 
    </div> 
    <div class="col-xs-4" align="center" style="padding-left: 110px"> 
     <a class="btn btn-default" href="projects.html#/projects">Browse 
      Projects</a> 
    </div> 
</div>

来源

2016-04-14 GregH

还包括“新项目/选择CSV和浏览项目”按钮的代码。 – andre3wap

是的。请包括代码 – pritesh

@ andre3wap和pritesh，对不起，复制了错误的代码片段，帖子已更新 – GregH

填充被消耗你的空间。

相反的：

align="center" style="padding-left: 110px"

尝试：

style="text-align: center"

引导按钮是直列默认屏蔽，所以让文字居中的CSS属性将对准他们，因为我觉得你想不harcoded填充这这里是问题。

来源

2016-04-14 20:05:06

使用

box-sizing:border-box;

在CSS 这表示当减去填充和边界从内宽度。

来源

2016-04-14 20:27:08

在更小的屏幕尺寸下移动到新行的HTML元素（按钮）

回答

相关问题