Question

I am trying to display text under my image but it wont work. My image displays but not my text.

The textarea appears but it has no text and I cannot click and write on it. Although if I Ctrl+F it says the words are there but I cant see them nor are they highlighted

<div id = "folderlist">
    <a href="">
        <image  src="${resource(dir: 'images', file:  'folderimg.png')}" width="100px" height="100px"/>
        <textarea class="captionText"placeholder="your default   text">please display some text</textarea>
    </a>
</div>

My CSS is as follows:

#folderlist {
    font-size: 0;
    width: 1500px;
    margin: 20px auto;
    position: absolute;
    top: 21%;
    right: 8.1%;
    text-align: center;
}

#folderlist a {
    margin: 15px;
    border: 8px solid transparent;
    display: inline-block;
    opacity: .8;    
    color:black;
}

#folderlist a:hover {
    opacity: 1;
    border-color: red;
}

.captionText {
    display: block;
    position: relative;
    width: 100px;
    height: 20px;
    text-color:black;
    border: 2px solid red;
}

I have tried different variations by removing placeholder using an input area and even just using <p> tags.

Any help would be much appreciated.

I have tried also the following:

<a style='text-decoration: none; color: orange;'>
    <img src="${resource(dir: 'images', file:  'folderimg.png')}" width="100px" height="100px">
    <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

Answer 1

问题在于

将#folderlist { font-size: 0; width: 1500px; margin: 20px auto; position: absolute; top: 21%; right: 8.1%; text-align: center; }设置为 0 会使文字不可见：）

Answer 2

代码很好。做一件事。把＃放在锚标签中。

<a href="#">
    <image  src="cool.jpg" width="100px" height="100px"/>
    <textarea class="captionText"placeholder="your default   text">please display some text</textarea>
</a>

其他代码中没有问题

Answer 3

textarea是表单输入。这不是你用来显示文字的东西。请改用“p”标记

Answer 4

Joshua Comeau是正确的 - 标记没有意义。

<a>是一个锚标记。它只允许包含某些东西。表单元素（例如<input>，<select>和<textarea>不在其中。

Textareas是您在邮件系统中期望的大型文本编辑区域。你不能用它们来显示文字。

你可以把那些文字放在那里根本没有包装。这可能就是你想要的。

如果您只需要附加样式规则，请使用<span>。

如果你要做的是获得一个矩形区域来放置文本，你需要<div>代替。

<textarea>中的{p> <a>不合法，永远不会在兼容的浏览器中使用。

你的代码＆＃34;我也试过＆＃34;实际上是完全有效的，你想做什么。

<a> tag not being displayed?

4 个答案: