我有一个 nextjs 应用程序(https://codesandbox.io/s/kind-ellis-bkobb?file=/pages/list2.js)使用 material-ui 没有任何主题的页面:
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import List from "@material-ui/core/List";
export default function List2Page() {
return (
<>
<p>Paragraph text</p>
<List>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<ListItem>
Donec pretium elit id augue vulputate dignissim non eget
</ListItem>
<ListItemText>
Vestibulum scelerisque facilisis libero quis congue nulla
</ListItemText>
<ListItem>
<ListItemText primary="Proin ornare sapien libero, eget commodo sem laoreet sit"></ListItemText>
</ListItem>
</List>
</>
);
}
这是在横向模式下在 android Chrome 浏览器上制作的此页面的屏幕截图(看起来不错):
在纵向模式下(看起来很疯狂):
为什么纵向模式下两个元素比其他元素小很多,如何使字体大小一致?
解决方案是将“max-height: 999999px”添加到任何父元素,如下所述:https ://stackoverflow.com/a/60044980/523972
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句