HTML代碼在Firefox中無法正常工作

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

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

 <!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>

查看代碼段這是您想要的方式嗎？

Answer 3

您可以嘗試使用text-align設置輸入標簽的樣式，以將值設置在中心。 這對我來說適合您的代碼。

 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 個解決方案

解決方案1
2 2016-07-12 00:25:15

解決方案2
1 2016-07-12 02:01:40

解決方案3
0 2016-07-12 01:36:51

HTML代碼在Firefox中無法正常工作

問題描述

3 個解決方案

解決方案1 2 2016-07-12 00:25:15

解決方案2 1 2016-07-12 02:01:40

解決方案3 0 2016-07-12 01:36:51

解決方案1
2 2016-07-12 00:25:15

解決方案2
1 2016-07-12 02:01:40

解決方案3
0 2016-07-12 01:36:51