定位文字＆amp;图像下的条形图

时间：2014-03-18 07:36:47

标签： html css

我的html页面顶部是可水平滚动的输入图像。我使用了属性white-space：nowrap ;
我想在每张图片下面放一个文字。但面临一些问题：---

1＆GT;所有文字都在第一张图片和被覆盖了。 （即使我使用属性 position：absolute; ）
2 - ;我无法滚动到右侧的图像。在图像下添加文本后，甚至滚动条在GUI上也不可见。

实际上我想要实现的是：--- 每个图像下面都有一个文本，下面是文本，它们将是一个水平条。 我应该可以滚动到屏幕右侧的图像。每当按下按钮时，我将在图像下方的发光条指示按钮图像被选中。这里bar表示水平线（有一些宽度），我可以改变颜色以指示图像输入。

===============================
IMAGE | IMAGE | IMAGE | IMAGE | 
TEXT  | TEXT  | TEXT  | TEXT  |
BAR   | BAR   | BAR   | BAR   |
===============================

目前我发布的代码不包含在文本下添加BAR的逻辑。 请建议。

<!DOCTYPE html>
<html style="height: 100%;">

<head>
<style>
body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:relative;
}

#imgtxt{ 
   position: absolute; 
   top: 40px; 
   left: 0; 
   width: 100%; 
   font-family:arial; 
   color:#DDDFED; 
   font-size:15px;
}

#images {
    background-color:#292B3B;
    white-space:nowrap;
}
div.scrollable {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 20px;
    box-sizing:border-box;
}
#Menu {
    background-color:#FFCCFF;
    position:absolute;
    top:70px;
    bottom:20px;
    left:0;
    width:200px;
}
#center {
    background-color:#eeeeee;
    position:absolute;
    top:70px;
    left:200px;
    right:0px;
    bottom:20px;
}
#fotter {
    background-color:#CC99FF;
    text-align:center;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
}

</style>
</head>

<body >


<div id="images" class="scrollable">
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
 <p id="imgtxt">Keypad</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-2</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-3</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-4</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-5</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-6</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-7</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-8</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-9</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-10</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-11</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-12</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-13</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-14</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-15</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-16</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-17</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-18</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-19</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-20</p>
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p id="imgtxt" >Keypad-21</p>
</div>
<div id="Menu"> <b>Main Menu</b>

    <br />BUTTON-1
    <br />BUTTON-2
    <br />BUTTON-3</div>
<div id="center">Table center</div>
<div id="fotter">Copyright © 2014 My First Layout</div>
</body>
</html>

JSFiddle：http://jsfiddle.net/B7Njx/

enter image description here

1 个答案:

答案 0 :(得分：0)

您可以在包含输入图像和文字的div上使用display: inline-block。

请参阅此演示。

<强> jsFiddle

HTML 

<div class="input">
    <input type="image" src="https://encrypted-tbn0.gstatic.com/images..." onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
    <p class="imgtxt">Keypad</p>
</div>

CSS 

.input {
    display: inline-block;
    padding: 0 2px;
}
.input input {
    display: block;
}
.imgtxt {
    margin: 0;
    font-family:arial;
    color:#DDDFED;
    font-size:15px;
}

当您使用position: absolute时，元素将相对于其指定位置的最近父级定位。在您的示例中，所有<p>标记的位置都相同。

相关问题
最新问题