Question

我对CSS /编程一般都很陌生，我正在尝试为朋友建立一个网站徽标作为练习。他希望他的名字在整个标题中合理并响应页面，我想出了 ALMOST 完美运作的东西。这就是我所拥有的：

<style>
body {
  background: black;
}

.container {
  overflow: hidden;
  line-height: 1em;
  color: white;
}

.header {
  border: 1px solid white;
  width:30%;
  margin: 20px 0 0 0;
  padding: 5px;

  display:flex;
  flex-direction: column;
  line-height: 0em;
  align-items: center;

}

.header h1{
  flex-direction: row;
  display:flex;

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: center;
  width: 100%;
}

.header h1 p {
  text-align: center;
/*   background: gray;
 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  width: 100%;
  font-size: 20px;

}

</style>

<div class="container">
<div class="header">
<h1><p>I</p><p>S</p><p>T</p><p>H</p><p>I</p><p>S</p></h1>
<h1><p>T</p><p>O</p><p>T</p><p>A</p><p>L</p><p>L</p><p>Y</p></h1>
<h1><p>I</p><p>N</p><p>S</p><p>A</p><p>N</p><p>E</p><p>?</p></h1>
</div>
</div>

所以现在看起来没问题，而且我很乐意将它整合到网站的其他部分CSS中。我遇到的问题有两个：

A）我似乎无法调整flexbox属性来消除/控制所有空白区域。宽度很好但是盒子太高了，我不确定我需要哪种属性组合来实现对头部高度的精细控制。

B）最后连续20个p。这似乎效率低下？我现在想保持纯CSS，所以这可能是不可避免的，但有没有更好的方法通过合并另一种语言来做到这一点？

为任何新手错误道歉/ StackOverflow失礼。如果在其他地方已经清楚地回答了这个问题，那就无限歉了。

CSS Flexbox-太多额外的垂直空间

0 个答案: