Question

如何使按钮文本在下面的情况下左上角（div2）。

我必须使用按钮来满足某些要求，但要使它看起来像普通文本。任何帮助你的帮助。

Container是flexbox列，并且有一个flex 1按钮。

我不想在按钮内添加元素并使其位置绝对。

需要更清洁的方式。

.container {
  display: flex;
  flex-flow: column;
  height: 200px;
  border: 1px solid gray;
}
.div1, .div3 {
  height: 40px;
}
.div2 {
  flex: 1;
  border: 1px solid red;
  text-align: left;
}

<div class="container">
   <div class="div1">
     div1
   </div>
   <button class="div2">
     I want this text to be top left
   </button>
   <div class="div3">
     div3
   </div>
</div>

Answer 1

这并不完美，可能你不得不玩这个，但我想这是朝着正确方向迈出的一步。

.container {
  display: flex;
  flex-flow: column;
  height: 200px;
  border: 1px solid gray;
}
.div1, .div3 {
  height: 40px;
}
.div2 {
  flex: 1;
  border: 1px solid red;
  text-align: left;
  position:absolute;
flex-direction: column;

    }

Answer 2

左上角对齐

使用属性flex-direction: column;将文字左上方对齐。

＆＃13;

.container {
  display: flex;
  flex-flow: column;
  height: 200px;
  border: 1px solid gray;
}
.div1, .div3 {
  height: 40px;
}
.div2 {
  flex: 1;
  border: 1px solid red;
  text-align: left;
  flex-direction:column;
}

＆＃13;

<div class="container">
   <div class="div1">
     div1
   </div>
   <button class="div2">
     I want this text to be top left
   </button>
   <div class="div3">
     div3
   </div>
</div>

＆＃13;

中心对齐

只需将您的风格text-align:left更改为text-align:center。

＆＃13;

.container {
  display: flex;
  flex-flow: column;
  height: 200px;
  border: 1px solid gray;
}
.div1, .div3 {
  height: 40px;
}
.div2 {
  flex: 1;
  border: 1px solid red;
  text-align: center;  
}

＆＃13;

<div class="container">
   <div class="div1">
     div1
   </div>
   <button class="div2">
     I want this text to be top left
   </button>
   <div class="div3">
     div3
   </div>
</div>

＆＃13;

您可以根据自己的要求进行组合并应用属性。

Answer 3

所以，我在.div2分类元素中添加了padding-bottom，因此div2中的文本被向上推，远离元素的下边缘。

＆＃13;

  levelName
1 1        
2  ¦--2    
3  °--3    
4      ¦--4
5      °--5

＆＃13;

.container {
  display: flex;
  flex-flow: column;
  height: 200px;
  border: 1px solid gray;
}
.div1, .div3 {
  height: 40px;
}
.div2 {
  flex: 1;
  border: 1px solid red;
  text-align: left;
  padding-bottom: 40%; 
}

＆＃13;

左上角对齐按钮文本

3 个答案: