文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >将文本和条形图定位在图像下

问将文本和条形图定位在图像下
EN

Stack Overflow用户
提问于 2014-03-18 07:36:46
回答 1查看 239关注 0票数 1

我的html页面顶部是水平滚动输入图像。我使用了属性空白:nowrap；

我正试着在我的每一张图片下放一段文字。但面临一些问题：

1>所有的文本开始在第一个图像下&被覆盖他们的。(即使我使用属性位置:绝对值；)

2>我无法滚动到右边的图像。在添加图片下的文本之后，甚至滚动条在GUI上也是不可见的。

实际上我想实现的是：

每个图像将有一个文本在它和文字下面，他们将是一个水平条。我应该能够滚动到屏幕右边的图像。每当按钮被按下，我将辉光栏下的图像指示按钮图像被选择。这里的条形表示一条水平线(有一定的宽度)，我可以为它改变颜色，以表示图像输入被选中。

代码语言：javascript
复制
===============================
IMAGE | IMAGE | IMAGE | IMAGE | 
TEXT  | TEXT  | TEXT  | TEXT  |
BAR   | BAR   | BAR   | BAR   |
===============================

目前，我张贴的代码不包含在文本下添加条形条的逻辑。请建议一下。

代码语言：javascript
复制
<!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/

​

​

html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-03-18 07:51:21

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

看这个演示。

jsFiddle

HTML

代码语言：javascript
复制
<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

代码语言：javascript
复制
.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>标记的位置都是相同的。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/22473023

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档