由于文本内容,html按钮上面有多余的空格

时间:2018-01-10 02:26:11

标签: html css

所以我在下面有以下代码。

E   ImportError: No module named operator
.innerDiv1 {
  display: inline-block;
  width: 45%;
  border-right: 1px solid;
  padding-right: 5px
}

.innerDiv2 {
  display: inline-block;
  width: 45%;
  padding-left: 5px;
}

.inner2 {
  border: 1px solid black;
  
}

.rect {
  width: 0%;
  height: 20px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: black;
  font-size: 12;
}

.sendreceiveBtn {
  height: 25px;
  width: 100%;
  font-size: 12px;
  max-height: 25px;
  
}

我需要将一个按钮与另一个div垂直对齐,并且在另一个div内部作为内联块,因此它们最终彼此相邻,最好是完全相同的大小。然而,关于按钮的一些东西正在推下它一点。到目前为止,我所做的任何事情都无法改变此EXCEPT以增加按钮中文本的字体。什么是这个空间,我怎样才能让这些空间排好?

3 个答案:

答案 0 :(得分:2)

这是罪魁祸首:

fileB

答案 1 :(得分:1)

垂直对齐允许多个兄弟姐妹共享相同的垂直位置。

.innerDiv1 {
  display: inline-block;
  width: 45%;
  border-right: 1px solid;
  padding-right: 5px
  vertical-align: middle;
}

.innerDiv2 {
  display: inline-block;
  width: 45%;
  padding-left: 5px;
  vertical-align: middle;
}

您可以在以下jsfiddle中看到一个工作示例:click to enlarge

答案 2 :(得分:1)

用以下内容替换现有的CSS:

    .innerDiv1 {   display: table-cell;   width: 45%;   border-right: 1px solid;   padding-right: 5px; vertical-align: middle; }

.innerDiv2 {   display: table-cell;   width: 45%;   padding-left: 5px; vertical-align: middle; }

.inner2 {   border: 1px solid black;    }

.rect {   width: 0%;   height: 20px;   background-color: #4CAF50;   text-align: center;   line-height: 30px;   color: black;   font-size: 12; }

.sendreceiveBtn {  min-height: 25px; width: 100%; font-size: 12px; height: auto;    }

#progBtnBar{
    display: table;
    width: 100%;
    height: auto; }

多数民众赞成。它将解决问题。