1

我目前正在尝试使用 CSS 定位 textarea 并使其看起来不错。但是它不起作用。

相关CSS:

#BoardInput {
padding:0px;
width:100%;
height:100%;
}
#BoardSmiley {
min-width:100px;
width:20%;
padding:10px;
border-right:thin solid #4E6011;
border-bottom:thin solid #4E6011;
background-color:#C6E466;
}
#BoardCode {
 border:thin solid #4E6011;
background-color:#C6E466;
padding:3px;
}

相关HTML:

<div id="BoardCode">
    <button onclick="addBBCode('[FETT]','[/FETT]');">Fett</button>
    <button onclick="addBBCode('[KURSIV]','[/KURSIV]');">Kursiv</button>
    <button onclick="addBBCode('[UNTERSTRICHEN]','[/UNTERSTRICHEN]');">Unterstrichen</button>
    <button onclick="addLink();">Link</button>
    <button onclick="addImage();">Bild</button>
</div>
<form action="index.php?s=board&action=addedit&where=<?=$Result['Overview']['PostID']?>" method="POST">
<table id="Board">
    <tr>
        <td>
              <textarea id="BoardInput" name="Text"></textarea>
            <input type="hidden" name="ThreadID" value="<?=$Result['Overview']['ThreadID']?>" />
        </td>
        <td id="BoardSmiley">
        <?php
        $BoardTemplate->showSmileys();
        ?>
        </td>
    </tr>
    <tr colspan="2">
         <td><input type="submit" value="OK" />
    </tr>
</table>
</form>

问题是我想要顶部的“代码”框,右侧的笑脸框和左侧的文本区域。我希望他们能完全适应彼此。然而,textarea 比上面的代码框更靠近右侧 1px,比右侧的笑脸框更靠近顶部 2px。

我在这里做错了什么?

编辑:

jsFiddle:jsfiddle.net/SSxSN和图像:

在此处输入图像描述

4

2 回答 2

1

利用:

resize:none;

在 textarea 中的 CSS 代码中。

于 2020-10-24T06:36:17.113 回答
0

为左侧和底部添加负边距,如下所示:

#BoardInput {
    padding:0px;
    width:100%;
    height:100%;
    margin: 0 0 -8px -1px;
}

http://jsfiddle.net/SSxSN/1/

于 2013-04-23T13:38:42.097 回答