Question

我试图显示以下代码。它在Chrome和Safari中运行良好，但在Firefox中无法正常运行。代码链接：http://jsfiddle.net/nvarun123/fv4jxo4t/26/

Html代码：

<div> 
    <a>
        <button (click)="decrement()" class="btn btn-primary" style="float: left;">
            <span><i class="glyphicon glyphicon-minus" ></i></span>
        </button>
    </a>
    <input type="text" style="width:45%;" [(ngModel)]="count">
   <a>
       <button (click)="increment()" class="btn btn-primary" style="float: right;">
           <span><i class="glyphicon glyphicon-plus" ></i></span>
       </button>
    </a>
</div>

CSS代码：

div {
    position:relative;
    border: 1px solid #CACEDB;
    width: 162px;
    height:38px;
    overflow: hidden;
    white-space: nowrap;
    border-radius:3px;
}

input {
    text-align: center;
    height:100%;
    width:100%;
    border:none;
}

input:focus {
    outline: none;
}

button {
    height:100%; 
    border:none;    
}

button:hover {
    background-color: green;
}

button:active {
    background-color: #015191;
}

Answer 1

这是一个在html元素中垂直居中内容的技巧。

使用CSS时，垂直对齐总是很棘手，但是这段代码可以让您轻松地为单行文本执行此操作。基本上我们使用line-height属性在文本的顶部和底部放置一个等距空格。要使其工作，行高度值必须与包含文本的html元素的高度相同。

检查

p {
  border: red dotted thin;
  height: 100px;
  text-align: center;
  background: black;
  color: white;
  /* magic line */
  line-height: 100px;
}

<p>
  One Liner
</p>

Answer 2

＆＃13;

div {
  position: relative;
  border: 1px solid #CACEDB;
  width: 500px;
  height: 500px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 5px;
  text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
  
  <div>
    <a>
      <button type="button" (click)="decrement()" class="btn btn-primary" style="width:50px;height:50px;">
        <span class="glyphicon glyphicon-minus"></span>
      </button>
    </a>
    <span style="width:100%">1</span>
    <a>
      <button type="button" (click)="increment()" class="btn btn-primary" style="width:50px;height:50px;">
        <span class="glyphicon glyphicon-plus"></span>
      </button>
    </a>
  </div>
  
</body>
</html>

＆＃13;

查看代码段这是你想要的吗？

Answer 3

您可以尝试设置输入标记的样式，使用text-align：center设置中心的值;这对我的代码很有帮助。

div {
   position:relative;
   width: 160px;
   height:38px;
   overflow: hidden;
   white-space: nowrap;
   border-radius:5px;
}
input{
   text-align: center;
}
input:focus {outline:none;}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>

  <body>
    <div> 
        <a>
        <button type="button" (click)="decrement()" class="btn btn-primary" style="height:100%; border:none;">
        <span class="glyphicon glyphicon-minus"></span>
        </button>
        </a>
        <input type="text" style="width:45%;border:none;">
       <a>
        <button type="button" (click)="increment()" class="btn btn-primary" style="height:100%;float: right; ">
        <span class="glyphicon glyphicon-plus"></span>
        </button>
        </a>
    </div>
  </body>

</html>

HTML代码无法在Firefox中正常运行

3 个答案: