Question

这是我正在尝试做的代码：http://codepen.io/anatoly314/pen/Vebexq

为什么我的标题：Hello World！捕获两行而不是一行？我试过在.menu-header课程上玩宽度，但它没有任何区别？

这是html部分：

<div class="cell">
        <div class="menu-item box_shadow">
            <div class="menu-image-container"></div>
            <div class="menu-header-container">
                <span class="menu-header">Hello World!</span>
            </div>
            <div class="menu-content-container">
               <ul>
                  <li>First</li>
                  <li>Second</li>
                  <li>Third</li>
              </ul>
          </div>
       </div>
</div>

CSS部分：

.cell{
  min-height: 100vh;
  background-color: #FDDFD3;
  vertical-align: middle;
  display: flex;
  justify-content: center;
}

.menu-item{
  height: 80vh;
  background-color: grey;
  align-self: center;
  width: 20vw;
  border-radius: 25px;
}



.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px grey;
          box-shadow: 0px 0px 4px 0px grey;
}

.menu-image-container{
  height: 50%;
  background-color: #fff;
   border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

.menu-header-container{
  border-top: 40px solid white;
  border-right: 20vw solid yellow;
  height: 10%;
}

.menu-header{
    position: relative;
    left: 15vw;
    top: -5vh;
}

.menu-content-container{
  height: 40%;
  direction: rtl;
}

Answer 1

你可以使用

.menu-header {
    position: relative;
    left: 15vw;
    top: -5vh;
    white-space: nowrap;
}

但我不确定这是不是你想要的。

试图在具有不对称边（倾斜矩形）的div中写入文本但是它在2行之间拉伸，为什么？

1 个答案: