Question

＆lt; p＆gt;我想要一个黑色背景的文本区域在DIV中，带有白色背景。文本区域不应填充完整的DIV，因此仍然可以在文本区域周围看到DIV的白色。 DIV本身应该只占屏幕宽度的80％（或浏览器的标签）。问题是在文本区域周围看不到DIV的白色背景。＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt; .mydiv { vertical-align：middle; 宽度：80％; text-align：left; padding-top：10px; padding-left：20px; padding-right：20px; 背景：白色; } .mytextarea { 身高：100px; 宽度：100％; 位置：相对; 填充：2px 2px; font-size：12px; font-weight：bold; 向左飘浮; border-radius：10px; font-family：＆＃39; Helvetica＆＃39;，草书; 白颜色; text-decoration：none; 背景颜色：黑色; border-bottom：4px solid＃2980B9; 边框：2px纯蓝色; 大纲：0; } ＆LT; /代码＆GT;＆LT; /预＆GT;

Answer 1

您可以使用display:inline-block;代替float:left;

.mytextarea {
    height: 100px;
    width: 100%;
    position: relative;
    padding: 2px 2px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    border-radius: 10px;
    font-family: 'Helvetica', cursive;
    color: white;
    text-decoration: none;
    background-color: black;
    border-bottom: 4px solid #2980B9;
    border: 2px solid blue;
    outline: 0;
}

Jsfiddle

＆＃13;

.mydiv {
  vertical-align: middle;
  width: 80%;
  text-align: left;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  background: red;
}
.mytextarea {
  height: 100px;
  width: 100%;
  position: relative;
  padding: 2px 2px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  border-radius: 10px;
  font-family: 'Helvetica', cursive;
  color: white;
  text-decoration: none;
  background-color: black;
  border-bottom: 4px solid #2980B9;
  border: 2px solid blue;
  outline: 0;
}

＆＃13;

<div class="mydiv">
  <textarea class="mytextarea"></textarea>
</div>

＆＃13;

DIV的背景在<textarea>周围可见

1 个答案: