Question

我正在尝试为我的Web应用程序创建一个新的RTF编辑器（学生预算），并且在尝试将所有按钮设置为相同大小时，除网格/弹性布局之外，其他所有功能都可以正常工作。

Here是当前编辑器的外观。注意最后一个图标比其他图标大得多吗？

除了这个问题之外，该行中的按钮数量是未知的，因为我正在构建的API允许定义此编辑器将具有的属性

从网络上的多个位置搜索之后，我发现的所有结果都给了我与现有CSS相同的结果。 This is the first external source I've tried。尝试the flexbox会产生相似的结果

如果下面的代码缺少某些内容，或者您想直接尝试清理后的标记，请访问jsfiddle

javascript的HTML输出，css标记将对其进行修改

<ttace data-empty="Type something to create a post" class="TTACEEditor">
  <div class="ttace controls">
    <div>
        <div>
            <button title="Bold"><span class="ttace icon bold"></span></button>
            <button title="Italic"><span class="ttace icon italic"></span></button>
            <button title="Strike through"><span class="ttace icon strike-through"></span></button>
            <button title="Underline"><span class="ttace icon underline"></span></button>
            <button title="Insert horizontal rule"><span class="ttace icon hr"></span></button></div>
        <div>
            <button title="Align left"><span class="ttace icon justify-left"></span></button>
            <button title="Align center"><span class="ttace icon justify-center"></span></button>
            <button title="Align right"><span class="ttace icon justify-right"></span></button>
            <button title="Align full"><span class="ttace icon justify-full"></span></button></div>
        <div>
            <button title="Ordered list"><span class="ttace icon ordered-list"></span></button>
            <button title="Unordered list"><span class="ttace icon unordered-list"></span></button>
            <button title="Outdent"><span class="ttace icon indent-left"></span></button>
            <button title="Indent"><span class="ttace icon indent-right"></span></button></div>
        <div>
            <button title="Clear formatting"><span class="ttace icon clear-formatting"></span></button>
        </div>
    </div>
  </div>
  <div class="ttace textarea" contenteditable="true" data-empty="Type something to create a post"></div>
</ttace>

这是使用css-grid作为布局模板的代码

.TTACEEditor>.ttace.controls {
    margin: 0;
    padding: 0;
    display: flex;
}

.TTACEEditor>.ttace.controls>div {
    margin: 0 auto;
    padding: 0;
    display: inline-grid;
    grid-auto-flow: column;
    width: 100%;
}

.TTACEEditor>.ttace.controls>div>div {
    display: inline-grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-flow: column;
}

.TTACEEditor>.ttace.controls>div div button {
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    width: 100%;
    text-align: center;
}

.icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
}

这是使用flex的，但是输出与上面的标记非常相似，但存在相同的问题

.TTACEEditor>.ttace.controls {
    margin: 0;
    padding: 0;
    display: flex;
}

.TTACEEditor>.ttace.controls>div {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.TTACEEditor>.ttace.controls>div>div {
    display: inline-flex;
    flex-grow: 1;
    grid-auto-flow: column;
}

.TTACEEditor>.ttace.controls>div div button {
    color: black;
    margin: 0 auto;
    display: inline-block;
    flex-grow: 1;
    height: 100%;
    background-color: transparent;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
}

Answer 1

首先，由于当前没有浏览器支持拟议的css subgrid specification，所以我建议不要尝试使项目在嵌套网格中均匀分布。

第二，将图标分组为多个部分（创建嵌套的html结构）是否会导致“包含多个网格的网格”的硬性要求？如果没有，我强烈建议使用一种扁平的结构，因为这样可以使布局可以访问所有按钮并将它们的大小均等。

最后，据我了解，您的按钮只能排成一行，因此使用grid布局并不是真正合适的选择，因为它主要针对2D布局，在您的情况下，它是一个不错的{{ 1}}的效果也一样（并且将为wider range of browsers提供更好的支持）。

考虑到所有这些，我已经修改了您的代码，可以在in this fiddle

中找到所做的更改

如何将所有css-grid（或flex）元素设置为相同大小？

1 个答案: