Css 显示表格/表格单元格-将一个单元格向右对齐

下面是我的代码：我有几个问题我不知道该怎么解决：

a）我希望按钮与右侧对齐，并始终保持在一行（不要像“非常长的文件夹名称”示例中那样折叠在其他按钮下）。如果在

.btn group

div上使用

float:right

，这没关系，但我的第二点是：

b）我想用文本填充所有剩余的水平空间

---

任何帮助都将不胜感激。谢谢。

我想试试这样的东西

#folder-panel .btn-group {
    text-align: right;
    white-space: nowrap;
    padding-left: 5px;
}
#folder-panel .btn {
    float: none;
}

请参见演示：

因为您使用的是引导，所以需要确保您的CSS规则足够具体，以便生效

我在

.container

块中添加了一个ID，然后修改了

.btn

规则以设置

浮动：无

。这意味着按钮现在将是内联元素

如果不想使用和ID，那么必须确保在引导中复制选择器，以覆盖需要修改的CSS规则

将

text align:right

设置为

.btn group

，按钮将向右对齐。 最后，设置

空白：nowrap

，这将防止图标缠绕

---

注意：您可以尝试设置最小宽度值，但灵活性较低。

我会尝试类似的方法

#folder-panel .btn-group {
    text-align: right;
    white-space: nowrap;
    padding-left: 5px;
}
#folder-panel .btn {
    float: none;
}

请参见演示：

因为您使用的是引导，所以需要确保您的CSS规则足够具体，以便生效

我在

.container

块中添加了一个ID，然后修改了

.btn

规则以设置

浮动：无

。这意味着按钮现在将是内联元素

如果不想使用和ID，那么必须确保在引导中复制选择器，以覆盖需要修改的CSS规则

将

text align:right

设置为

.btn group

，按钮将向右对齐。 最后，设置

空白：nowrap

，这将防止图标缠绕

---

注意：您可以尝试设置最小宽度值，但灵活性较低。

尝试使用按钮组的

向右拉

选项，这样按钮组将向右浮动。如果需要，还可以使用网格部分来分隔按钮和文本内容

 <div class="container">

    <div class="list-group folders-list">
        <a class="list-group-item active" href="#">
            Folder 1
        </a>
        <a class="list-group-item table" href="#">
            <div class="col-md-5">
                <span class="folder-name table-cell">Very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long folder name</span></div>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 3</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 4</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 5</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
    </div>

</div> <!-- /container -->

---

尝试使用按钮组的

向右拉

选项，这样按钮组将向右浮动。如果需要，还可以使用网格部分来分隔按钮和文本内容

 <div class="container">

    <div class="list-group folders-list">
        <a class="list-group-item active" href="#">
            Folder 1
        </a>
        <a class="list-group-item table" href="#">
            <div class="col-md-5">
                <span class="folder-name table-cell">Very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long folder name</span></div>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 3</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 4</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
        <a class="list-group-item table" href="#">
            <span class="folder-name table-cell">Folder 5</span>
            <div class="pull-right btn-group btn-group-xs table-cell" role="group" aria-label="action buttons">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-pencil"></span></button>
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
        </a>
    </div>

</div> <!-- /container -->

向右拉

可以很好地工作，但第一行标签很长。在这种情况下，图标垂直堆叠。但是，将最小宽度值添加到

.btn组

将解决此问题，但是图标可能不会完全向右刷新，但这取决于设计者的特殊性。我不怎么使用Bootstrap来学习

pull right

类是很好的。是的，我完全同意你的观点，第一句话是行不通的。但正如您所说，我们可以使用

minwidth

或使用“columns”（列）（

col md

，

col sm

等）在网格系统中分离标签和按钮组。当然，这取决于用户的需要和灵活性：）

pull right

将很好地工作，除了第一行带有长标签。在这种情况下，图标垂直堆叠。但是，将最小宽度值添加到

.btn组

将解决此问题，但是图标可能不会完全向右刷新，但这取决于设计者的特殊性。我不怎么使用Bootstrap来学习

pull right

类是很好的。是的，我完全同意你的观点，第一句话是行不通的。但正如您所说，我们可以使用

minwidth

或使用“columns”（列）（

col md

，

col sm

等）在网格系统中分离标签和按钮组。当然，这取决于用户的需要和灵活性：）这不是个坏主意，但我想避免使用最小宽度，因为在某些项目中，我可以在btn组中有3或4个按钮，因此该元素的宽度必须自行调整，我想使用flexbox也可以轻松完成，但对于不支持flexbox的浏览器，我需要表格/表格单元格回退：/这不是个坏主意，但我想避免使用最小宽度，因为在某些项目中，我可以在btn组中有3或4个按钮，因此该元素的宽度必须自行调整，我认为使用flexbox也可以轻松完成，但对于不支持flexbox的浏览器，我需要表/表单元格回退：/I我更新了我的答案，请看一看。是的，你就是那个人！现在它完全按照我的要求工作。非常感谢：）我更新了我的答案，请看一看。是的，你就是那个人！现在它完全按照我的要求工作。非常感谢：）