6

我似乎无法将我的想法包裹在这个问题上。

似乎通过向我的文本区域添加一些填充（padding-left：3px），并将其从我的带有边框的 div 中推出。在摘要框中为文本添加一些填充将很有用，因为它对用户来说更易读。

结果如下：在此处输入图像描述

这应该是这样的： 在此处输入图像描述

这是 HTML / CSS 标记：

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
.fcontent_text {
    font-size: 8.5pt;
    text-align: right;
    color: rgb(11,63,113);
}
#fcontent_container {
    width: 800px;
    display: block;
    position: relative;
    margin: 5px;
}
#fcontent_wrapper {
    border: 1px solid rgb(128,128,128);
}
#summary {
    width: 100%;
    margin: 0;
    border: 0;
    position: relative;
    padding-left: 3px;
    height: 50px;
}
</style>


</head>

<body>
                <div id="fcontent_container">
                    <div class="fcontent_text">Summary</div>
                    <div id="fcontent_wrapper"><textarea class="normal" id="summary"></textarea></div>
                </div>
</body>

</html>
4

3 回答 3

14

添加box-sizing: border-box到，#summary以便您可以设置width: 100%左右填充，而内容不会溢出到容器中。

box-sizing

border-box

  • 宽度和高度属性包括填充和边框，但不包括边距。这是文档处于 Quirks 模式时 Internet Explorer 使用的盒子模型。

为了跨浏览器的兼容性，请务必包含前缀：

#summary {
    width: 100%;
    margin: 0;
    border: 0;
    position: relative;
    padding-left: 3px;
    height: 50px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
于 2013-10-16T20:27:17.370 回答
1

使用 box-sizing
您可以使用box-sizing: border-box;
检查一下：http ://codepen.io/gopkar/pen/HiEjn

没有 box-sizing
将 textarea 的宽度从更改width: 100%为width: 795px;
看看http://codepen.io/gopkar/pen/csxKo
width = <div-width> - <padding-you-have-given>

于 2013-10-16T20:30:17.757 回答
1

出于某种奇怪的原因，这个解决方案似乎绕过了一切并且完美地工作：

<div style="width: 800px">
<div style="text-align: right;">Expand</div>
    <div style="padding-right: 6px;">
        <textarea style="width: 100%; padding: 2px; margin: 0; border : solid 1px #999"></textarea>
    </div>
</div>
于 2013-10-17T12:56:06.053 回答