圖像按鈕不是一個表格單元格內可見

我的HTML代碼圖像按鈕不是一個表格單元格內可見

<tr> 
    <td><input type="image" style="height:25px; width:25px;" src="plus.png"></td> 
</tr>

正在創建細胞但圖像沒有顯示。但是，如果我使用img標記，它顯示，所以圖像的src沒有問題。

編輯：也許鏈接的問題的CSS，但無法弄清楚什麼： -

*{ 
     font-family: Arial, sans; 
     margin: 0; 
     padding: 0; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
    } 

    h1 { 
     margin: 1em 0; 
     text-align: center; 
    } 

    #container { 
     margin: 0 auto; 
     width: 50%; 
    } 

    #container input { 
     height: 2.5em; 
     visibility: hidden; 
    } 

    #container label { 
     background: #f9f9f9; 
     border-radius: 1em 1em 0 0; 
     color: #888; 
     cursor: pointer; 
     display: block; 
     float: left; 
     font-size: 1em; 
     height: 2.5em; 
     line-height: 2.5em; 
     margin-right: .25em; 
     padding: 0 1.5em; 
     text-align: center; 
    } 

    #container input:hover + label { 
     background: #ddd; 
     color: #666; 
    } 

    #container input:checked + label { 
     background: #DBF3FD; 
     color: #444; 
     position: relative; 
     z-index: 6; 
     /* 
     -webkit-transition: .1s; 
     -moz-transition: .1s; 
     -o-transition: .1s; 
     -ms-transition: .1s; 
     */ 
    } 

    #content { 
     background: #DBF3FD; 
     border-radius: 0 .25em .25em .25em; 
     min-height: 18em; 
     position: relative; 
     width: 100%; 
     z-index: 5; 
    } 

    #content div { 
     opacity: 0; 
     padding: 1.5em; 
     position: absolute; 
     z-index: -100; 
    } 

    #content-1 p { 
     clear: both; 
     margin-bottom: 1em; 
    } 
    #content-1 p.last { 
     margin-bottom: 0; 
    } 

    #content-2 p { 
     float: left; 
     width: 48.5%; 
    } 
    #content-2 p.column-right { 
     margin-left: 3%; 
    } 

    #content-3 p { 
     float: left; 
     width: 48.5%; 
    } 
    #content-3 p.column-right { 
     margin-left: 3%; 
    } 

    #container input#tab-1:checked ~ #content #content-1, 
    #container input#tab-2:checked ~ #content #content-2, 
    #container input#tab-3:checked ~ #content #content-3 
    { 
     opacity: 1; 
     z-index: 100; 
    } 

    input.visible { 
     visibility: visible !important; 
    } 
    table { 
     font-family: arial, sans-serif; 
     border-collapse: collapse; 
     width: 100%; 
    } 

    td, th { 
     border: 1px solid #dddddd; 
     text-align: left; 
     padding: 8px; 
    } 

    tr:nth-child(odd) { 
     background-color: #FFFFFF; 
    } 
    table { 
     border-collapse: collapse; 
     width: 100%; 
    } 

    th, td { 
     padding: 8px; 
     text-align: left; 
     border-bottom: 1px solid #ddd; 
    } 

    tr:hover{background-color:#96DCF7}

來源

2017-02-18 Soham Banerjee

嘗試包括img文件位於的文件夾，例如， 'SRC =「圖像/ plus.png」' – smoggers

這是什麼'類型=「形象」'？> –

請通過https://www.w3schools.com有ü可以看到很多的例子，並創造 –

嘗試用CSS。將style=" background-image: url("plus.png");"添加到輸入標籤。 input type="image"不是類型屬性的有效屬性。

來源

2017-02-18 11:49:14 sirion1987

方式是。這是一種有效的類型。直接來自w3schools： –

在你的代碼，你寫的輸入：

input.visible { 
    visibility: visible !important; 
}

但你也有：

input { 
    visibility: hidden; 
}

你永遠不參考。可見類你告訴我們的代碼，因此它保持隱。也許這是問題所在。嘗試將class="visible"添加到輸入。

<tr> 
    <td> 
     <input class="visible" type="image" style="height:25px; width:25px;" src="plus.png"> 
    </td> 
</tr>

來源

2017-02-18 12:47:03

這似乎是與其他代碼與您的html交互的問題。下面的代碼對我的作品：

<table> 
    <thead> 
    <tr> 
     <th>Image</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td><input type="image" src="Image.png"></td> 
    </tr> 
    </tbody> 
</table>

也許你應該從這裏開始，然後添加您的樣式回來一點點，直到你找到什麼導致了問題。

編輯：我抄你已經把這裏的代碼，並假定你有沒有和容器的標識與內容的ID和你的表住在有其他的div一個div。根據@Benjamin Naesen的建議，我將可見性設置爲可見，並且出現了圖片。

input.visible { 
    visibility: visible; 
}

這項工作是爲您服務的嗎？

來源

2017-02-18 13:01:51

圖像按鈕不是一個表格單元格內可見

回答

相關問題