英文:
center materialUI element <Tab>
问题
我想要的是**
我尝试了以下方式：
<Tabs
sx={{ paddingBottom: 5, width: "100%", display: "flex", justifyContent: "space-around" }}
>
<Tab style={{ width: "50%" }} label="Search Movies" />
<Tab style={{ width: "50%" }} label="Search TV Series" />
</Tabs>
但这不起作用。
英文:
what i want is that the < Tabs > should cover the whole page width and the < Tab > element inside it should use 50% of the width equally
i tried doing
<Tabs
sx={{ paddingBottom: 5 ,width:"100%",display:"flex",justifyContent:"space-around"}}
>
<Tab style={{ width: "50%" }} label="Search Movies" />
<Tab style={{ width: "50%" }} label="Search TV Series" />
</Tabs>
but this is not working
答案1
得分: -1
为了使Tabs组件覆盖整个页面宽度，并使内部元素均匀使用50%的宽度，您可以尝试以下方法：
<Tabs
sx={{ paddingBottom: 5, width: "100%", display: "flex", justifyContent: "center" }}
centered
>
<Tab label="Search Movies" style={{ flex: "0 0 50%" }} />
<Tab label="Search TV Series" style={{ flex: "0 0 50%" }} />
</Tabs>
解释：
- 将父Tabs组件的
width属性设置为"100%"，以使其覆盖整个页面宽度。 - 在父Tabs组件上使用
display: "flex"和justifyContent: "center"，以水平居中Tabs元素。 - 在Tabs组件上添加
centered属性，以均匀分布Tabs元素在可用空间中。 - 在每个Tab组件上设置
style属性为flex: "0 0 50%"，以使它们均匀占用50%的可用宽度。
通过应用这些更改，Tabs组件应该覆盖整个页面宽度，每个Tab元素将均匀占用50%的宽度。
英文:
To make the Tabs component cover the whole page width and have the elements inside use 50% of the width equally, you can try the following approach:
<Tabs
sx={{ paddingBottom: 5, width: "100%", display: "flex", justifyContent: "center" }}
centered
>
<Tab label="Search Movies" style={{ flex: "0 0 50%" }} />
<Tab label="Search TV Series" style={{ flex: "0 0 50%" }} />
</Tabs>
Explanation:
- Set the
widthproperty of the parent Tabs component to"100%"to make it cover the full page width. - Use
display: "flex"andjustifyContent: "center"on the parent Tabs component to horizontally center the Tabs elements. - Add the
centeredprop to the Tabs component to evenly distribute the Tabs elements across the available space. - Set the
styleproperty on each Tab component withflex: "0 0 50%"to make them occupy 50% of the available width equally.
By applying these changes, the Tabs component should span the entire page width, and the Tab elements will each take up 50% of the width evenly.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论