CSS16. display - flex - 标签
描述
通过之前的学习，现在来实现一组标签，表示星球的种类。当前的"li"标签都是行内盒子，虽然看似实现了标签效果，但是每一行的宽度却没有保持一致，当进行缩放时，布局会特别的混乱。现在使用Flex布局将当前的布局方式进行优化，首先删除"li"标签的"display: inline-block"属性，给"ul"添加"display: flex"使该元素称为弹性容器。再给容器添加"flex-wrap: wrap"属性表示换行，否则所有标签会在第一行排列。此时标签已经分行排列了，但，每一行的宽度看起来依然是不同的，这时候需要通过给弹性项添加属性，通过之前讲过的"flex"属性入手。继续给所有的"li"标签添加"flex: 1 0 auto"属性，auto代表在计算剩余空间时需要减去每个标签自身的宽度而不是之前讲的0%那样忽略了自身的宽度。此时标签功能基本上是完成了，但是注意，最后一行可能因为页面的缩放导致只有一个标签却占满了一整行。那么继续给所有的"li"标签设置"max-width: 10rem"即可，此时最后一行标签虽然少但是看起来依旧很和谐。HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77856KB, 提交时间: 2021-12-31
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n font-size: 12px;\n box-sizing: border-box;\n }\n nav ul {\n padding: 0.5rem;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n }\n nav ul li {\n //display: inline-block;\n margin: 0.2rem;\n flex: 1 0 auto;\n max-width: 10rem;\n }\n nav ul li a {\n position: relative;\n display: block;\n padding: 0.2rem 0.6rem;\n color: white;\n line-height: 1rem;\n background-color: black;\n border-radius: 0.2rem;\n text-decoration: none;\n text-align: center;\n }\n nav ul li a:before {\n position: absolute;\n content: '';\n width: 0;\n height: 0;\n border: 0.7rem solid transparent;\n border-right-width: 0.7rem;\n border-right-color: black;\n left: -1.2rem;\n top: 0;\n }\n </style>\n </head>\n <body>\n \t<nav>\n <ul>\n <li><a href=\"\">Fillithar</a></li>\n <li><a href=\"\">Berzite</a></li>\n <li><a href=\"\">Galidraan</a></li>\n <li><a href=\"\">Gravlex Med</a></li>\n <li><a href=\"\">Cato Neimoidia</a></li>\n <li><a href=\"\">Coruscant</a></li>\n <li><a href=\"\">Dantooine</a></li>\n <li><a href=\"\">Dhandu</a></li>\n <li><a href=\"\">Iktotchon</a></li>\n <li><a href=\"\">Hosnian Prime</a></li>\n <li><a href=\"\">Harkrova I</a></li>\n <li><a href=\"\">Livno III</a></li>\n <li><a href=\"\">Karfeddion</a></li>\n <li><a href=\"\">Eriadu</a></li>\n <li><a href=\"\">Jestefad</a></li>\n <li><a href=\"\">Iridonia</a></li>\n <li><a href=\"\">Malachor</a></li>\n <li><a href=\"\">Gan Moradir</a></li>\n <li><a href=\"\">Kethmandi</a></li>\n <li><a href=\"\">Mirrin Prime</a></li>\n <li><a href=\"\">Ezaraa</a></li>\n <li><a href=\"\">Muunilinst</a></li>\n <li><a href=\"\">Itapi Prime</a></li>\n <li><a href=\"\">Nam Chorios</a></li>\n </ul>\n </nav>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1746ms, 内存消耗: 77816KB, 提交时间: 2021-12-26
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n font-size: 12px;\n box-sizing: border-box;\n }\n nav ul {\n padding: 0.5rem;\n list-style: none;\n display:flex;\n flex-wrap: wrap;\n }\n nav ul li {\n flex: 1 0 auto;\n margin: 0.2rem;\n max-width: 10rem;\n }\n nav ul li a {\n position: relative;\n display: block;\n padding: 0.2rem 0.6rem;\n color: white;\n line-height: 1rem;\n background-color: black;\n border-radius: 0.2rem;\n text-decoration: none;\n text-align: center;\n }\n nav ul li a:before {\n position: absolute;\n content: '';\n width: 0;\n height: 0;\n border: 0.7rem solid transparent;\n border-right-width: 0.7rem;\n border-right-color: black;\n left: -1.2rem;\n top: 0;\n }\n </style>\n </head>\n <body>\n \t<nav>\n <ul>\n <li><a href=\"\">Fillithar</a></li>\n <li><a href=\"\">Berzite</a></li>\n <li><a href=\"\">Galidraan</a></li>\n <li><a href=\"\">Gravlex Med</a></li>\n <li><a href=\"\">Cato Neimoidia</a></li>\n <li><a href=\"\">Coruscant</a></li>\n <li><a href=\"\">Dantooine</a></li>\n <li><a href=\"\">Dhandu</a></li>\n <li><a href=\"\">Iktotchon</a></li>\n <li><a href=\"\">Hosnian Prime</a></li>\n <li><a href=\"\">Harkrova I</a></li>\n <li><a href=\"\">Livno III</a></li>\n <li><a href=\"\">Karfeddion</a></li>\n <li><a href=\"\">Eriadu</a></li>\n <li><a href=\"\">Jestefad</a></li>\n <li><a href=\"\">Iridonia</a></li>\n <li><a href=\"\">Malachor</a></li>\n <li><a href=\"\">Gan Moradir</a></li>\n <li><a href=\"\">Kethmandi</a></li>\n <li><a href=\"\">Mirrin Prime</a></li>\n <li><a href=\"\">Ezaraa</a></li>\n <li><a href=\"\">Muunilinst</a></li>\n <li><a href=\"\">Itapi Prime</a></li>\n <li><a href=\"\">Nam Chorios</a></li>\n </ul>\n </nav>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1746ms, 内存消耗: 77864KB, 提交时间: 2022-01-22
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n font-size: 12px;\n box-sizing: border-box;\n }\n nav ul {\n padding: 0.5rem;\n list-style: none;\n display:flex;\n flex-wrap:wrap;\n }\n nav ul li {\n //display: inline-block;\n margin: 0.2rem;\n flex:1 0 auto;\n max-width:10rem;\n }\n nav ul li a {\n position: relative;\n display: block;\n padding: 0.2rem 0.6rem;\n color: white;\n line-height: 1rem;\n background-color: black;\n border-radius: 0.2rem;\n text-decoration: none;\n text-align: center;\n }\n nav ul li a:before {\n position: absolute;\n content: '';\n width: 0;\n height: 0;\n border: 0.7rem solid transparent;\n border-right-width: 0.7rem;\n border-right-color: black;\n left: -1.2rem;\n top: 0;\n }\n </style>\n </head>\n <body>\n \t<nav>\n <ul>\n <li><a href=\"\">Fillithar</a></li>\n <li><a href=\"\">Berzite</a></li>\n <li><a href=\"\">Galidraan</a></li>\n <li><a href=\"\">Gravlex Med</a></li>\n <li><a href=\"\">Cato Neimoidia</a></li>\n <li><a href=\"\">Coruscant</a></li>\n <li><a href=\"\">Dantooine</a></li>\n <li><a href=\"\">Dhandu</a></li>\n <li><a href=\"\">Iktotchon</a></li>\n <li><a href=\"\">Hosnian Prime</a></li>\n <li><a href=\"\">Harkrova I</a></li>\n <li><a href=\"\">Livno III</a></li>\n <li><a href=\"\">Karfeddion</a></li>\n <li><a href=\"\">Eriadu</a></li>\n <li><a href=\"\">Jestefad</a></li>\n <li><a href=\"\">Iridonia</a></li>\n <li><a href=\"\">Malachor</a></li>\n <li><a href=\"\">Gan Moradir</a></li>\n <li><a href=\"\">Kethmandi</a></li>\n <li><a href=\"\">Mirrin Prime</a></li>\n <li><a href=\"\">Ezaraa</a></li>\n <li><a href=\"\">Muunilinst</a></li>\n <li><a href=\"\">Itapi Prime</a></li>\n <li><a href=\"\">Nam Chorios</a></li>\n </ul>\n </nav>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1747ms, 内存消耗: 77816KB, 提交时间: 2021-12-30
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n font-size: 12px;\n box-sizing: border-box;\n }\n nav ul {\n padding: 0.5rem;\n list-style: none;\n display:flex;\n \n display:flex;\n flex-wrap:wrap;\n }\n nav ul li {\n display: inline-block;\n margin: 0.2rem;\n flex:1 0 auto;\n max-width:10rem;\n }\n nav ul li a {\n position: relative;\n display: block;\n padding: 0.2rem 0.6rem;\n color: white;\n line-height: 1rem;\n background-color: black;\n border-radius: 0.2rem;\n text-decoration: none;\n text-align: center;\n }\n nav ul li a:before {\n position: absolute;\n content: '';\n width: 0;\n height: 0;\n border: 0.7rem solid transparent;\n border-right-width: 0.7rem;\n border-right-color: black;\n left: -1.2rem;\n top: 0;\n }\n </style>\n </head>\n <body>\n \t<nav>\n <ul>\n <li><a href=\"\">Fillithar</a></li>\n <li><a href=\"\">Berzite</a></li>\n <li><a href=\"\">Galidraan</a></li>\n <li><a href=\"\">Gravlex Med</a></li>\n <li><a href=\"\">Cato Neimoidia</a></li>\n <li><a href=\"\">Coruscant</a></li>\n <li><a href=\"\">Dantooine</a></li>\n <li><a href=\"\">Dhandu</a></li>\n <li><a href=\"\">Iktotchon</a></li>\n <li><a href=\"\">Hosnian Prime</a></li>\n <li><a href=\"\">Harkrova I</a></li>\n <li><a href=\"\">Livno III</a></li>\n <li><a href=\"\">Karfeddion</a></li>\n <li><a href=\"\">Eriadu</a></li>\n <li><a href=\"\">Jestefad</a></li>\n <li><a href=\"\">Iridonia</a></li>\n <li><a href=\"\">Malachor</a></li>\n <li><a href=\"\">Gan Moradir</a></li>\n <li><a href=\"\">Kethmandi</a></li>\n <li><a href=\"\">Mirrin Prime</a></li>\n <li><a href=\"\">Ezaraa</a></li>\n <li><a href=\"\">Muunilinst</a></li>\n <li><a href=\"\">Itapi Prime</a></li>\n <li><a href=\"\">Nam Chorios</a></li>\n </ul>\n </nav>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1749ms, 内存消耗: 77848KB, 提交时间: 2021-12-30
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n font-size: 12px;\n box-sizing: border-box;\n }\n nav ul {\n padding: 0.5rem;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n }\n nav ul li {\n margin: 0.2rem;\n flex: 1 0 auto;\n max-width:10rem;\n }\n nav ul li a {\n position: relative;\n display: block;\n padding: 0.2rem 0.6rem;\n color: white;\n line-height: 1rem;\n background-color: black;\n border-radius: 0.2rem;\n text-decoration: none;\n text-align: center;\n }\n nav ul li a:before {\n position: absolute;\n content: '';\n width: 0;\n height: 0;\n border: 0.7rem solid transparent;\n border-right-width: 0.7rem;\n border-right-color: black;\n left: -1.2rem;\n top: 0;\n }\n </style>\n </head>\n <body>\n \t<nav>\n <ul>\n <li><a href=\"\">Fillithar</a></li>\n <li><a href=\"\">Berzite</a></li>\n <li><a href=\"\">Galidraan</a></li>\n <li><a href=\"\">Gravlex Med</a></li>\n <li><a href=\"\">Cato Neimoidia</a></li>\n <li><a href=\"\">Coruscant</a></li>\n <li><a href=\"\">Dantooine</a></li>\n <li><a href=\"\">Dhandu</a></li>\n <li><a href=\"\">Iktotchon</a></li>\n <li><a href=\"\">Hosnian Prime</a></li>\n <li><a href=\"\">Harkrova I</a></li>\n <li><a href=\"\">Livno III</a></li>\n <li><a href=\"\">Karfeddion</a></li>\n <li><a href=\"\">Eriadu</a></li>\n <li><a href=\"\">Jestefad</a></li>\n <li><a href=\"\">Iridonia</a></li>\n <li><a href=\"\">Malachor</a></li>\n <li><a href=\"\">Gan Moradir</a></li>\n <li><a href=\"\">Kethmandi</a></li>\n <li><a href=\"\">Mirrin Prime</a></li>\n <li><a href=\"\">Ezaraa</a></li>\n <li><a href=\"\">Muunilinst</a></li>\n <li><a href=\"\">Itapi Prime</a></li>\n <li><a href=\"\">Nam Chorios</a></li>\n </ul>\n </nav>\n </body>\n</html>","libs":[]}