html - CSS - 对象不在一行中

Question

我想将这些对象排成一行

我的 HTML 代码如下所示：

    <input type="button" class="formreturn" value="Copy Url" onclick="Copy();" />
    <label><input type="text" class="txtfilename" id="op-text-filename" placeholder="type file name"/>.txt</label>
    <button type="button" class="formreturn" onclick="saveURLtoTXTfile();"><span class="glyphicon glyphicon-download"></span>.TXT</button>  
    <button class="excelsubmit" onclick="exportData()"><span class="glyphicon glyphicon-download"></span>.CSV</button>
    <button id="btnExport" class="excelsubmit" onclick="fnExcelReport();"><span class="glyphicon glyphicon-download"></span>.XLS </button>

和 CSS

 .formreturn {
font-weight:700;
text-decoration: none;
display:inline-block;
color:black;
background:#c6e2f2;
padding: 9px;
border-radius: 3px;
 }

 .copyurltext {
font-weight: bold;
margin-left: 30px;
}

.txtfilename {
display: inline-block;
float: left;
padding: 5px;
}

.excelsubmit {
font-weight:700;
float: right;
padding: 8px;
background:#c6e2f2;
}

如果我将.txtfloat:left放在我的 中formreturn，那么一切都很好，但是顺序错误，因为 .txt 按钮位于“复制网址”按钮旁边。我想要您在下面看到的订单，但所有内容都正确排列。

我在这里尝试过类似的东西：

http://jsfiddle.net/A9Ap7/1/

codeproject.com/Questions/5280800/How-do-I-put-everything-in-one-line

和这里

css 一切都在同一行

但这对我不起作用

我怎样才能解决这个问题？

标签： htmlcss

Answer 1

1. 尝试这个：

<div class="container">
    <div classs="btns-left">
        <input type="button" class="formreturn" value="Copy Url" onclick="Copy();" />
        <label><input type="text" class="txtfilename" id="op-text-filename" placeholder="type file name"/>.txt</label>
        <button type="button" class="formreturn" onclick="saveURLtoTXTfile();"><span class="glyphicon glyphicon-download"></span>.TXT</button> 
    </div>
    <div class="btns-right"> 
        <button class="excelsubmit" onclick="exportData()"><span class="glyphicon glyphicon-download"></span>.CSV</button>
        <button id="btnExport" class="excelsubmit" onclick="fnExcelReport();"><span class="glyphicon glyphicon-download"></span>.XLS </button>
    </div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}
.btns-left,
.btns-right {
  display: flex;
}

此外，您可以使用按水平轴对齐元素的属性，例如align-items: flex-start。

2. 或者： float: left;对于 btns-left 和float: right;btns-right 以及display: inline-block;没有任何地方的每个元素display: flex;。
3. 此外，可以尝试为每个元素浮动而不需要任何包装器（左侧的左侧属性，右侧的右侧属性）
4. 网格布局，但它更复杂。最好的解决方案是应用 flexbox 布局来定位元素。最好避免浮动，因为它可能会在将来清除流量时引起一些麻烦。