使用flexbox

Question

我有这段代码：

body {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

li {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: lightblue;
  flex-grow: 1;
}

a {
  display: block;
}

<ul>
  <li><a href="#">Test 1</a></li>
  <li><a href="#">Test 2</a></li>
  <li><a href="#">Test 3</a></li>
  <li><a href="#">Test 4</a></li>
  <li><a href="#">Test 5</a></li>
</ul>

我希望我的链接垂直和水平居中。另外，它们必须适合<li>容器。

你能继承flex-grow属性吗？

感谢您的帮助！

Answer 1

只需将li和a展开

＆＃13;

＆＃13;

body {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

li {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: lightblue;
  flex-grow: 1;
  display: flex;
}

a {
  flex-grow: 1;
  align-items:center;
  justify-content:center;
  display:flex;
}

＆＃13;

<ul>
  <li><a href="#">Test 1</a></li>
  <li><a href="#">Test 2</a></li>
  <li><a href="#">Test 3</a></li>
  <li><a href="#">Test 4</a></li>
  <li><a href="#">Test 5</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需向text-align: center添加li即可将其flex: 1加入li，将height: 100%添加到a和body { margin: 0; } ul { margin: 0; padding: 0; list-style-type: none; position: fixed; top: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; } li { margin: 0; padding: 0; width: 100%; background-color: lightblue; text-align: center; flex: 1; } a { display: block; height: 100%; }至<ul> <li><a href="#">Test 1</a></li> <li><a href="#">Test 2</a></li> <li><a href="#">Test 3</a></li> <li><a href="#">Test 4</a></li> <li><a href="#">Test 5</a></li> </ul>使它占据其父母高度的100％。

试试这个：

＆＃13;

＆＃13;

render() {
     return (
       <Navigator
         initialRoute={{ id: 'Sample', name: 'Index' }}
         renderScene={this.renderScene.bind(this)}
         configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight}
       />
     );   }

   renderScene = (route, navigator) => {
     if (route.id === 'Sample') {
       return (
         <Sample
           navigator={navigator}
         />
       );
     }    
 }

＆＃13;

<profiles>
    <profile>
        <id>P1</id>
        <build>
            ... some exec-maven-plugin entries
        </build>
    </profile>
    <profile>
        <id>P2</id>
        <build>
            ... some exec-maven-plugin entries
        </build>
    </profile>
<profiles>

<build>
    ... some more (but common for all) exec-maven-plugin entries
</build>

＆＃13;

＆＃13;

＆＃13;

Answer 3

问题是每个列表项（子项）还包含一个子项（链接）。

因此，也可以String string=line.replaceAll("[^\\p{Print}]",""); 添加display:flex;，然后您可以在li上使用flex属性。

＆＃13;

＆＃13;

li

＆＃13;

body {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

li {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: lightblue;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

a {
  display: block;
  align-self:center;
}

＆＃13;

＆＃13;

＆＃13;