CSS div块继承了父级的属性

Question

我在另一个div内有一个HTML div：

<div class="content">
     <div class="block">
     blabla
     </div>
     <br/>
     <div class="block">
     blabla
     </div>
     <br/>
     <div class="block">
     blabla
     </div>
     <br/>
     <div class="block">
     blabla
     </div>
</div>

我期待看到包含'blabla'的4个小块，但是这些块占据整个区域（宽度与“内容”相同）

如何禁用父对子继承？

CSS：

.block {
  border-radius: 4px;
  border: 1px solid;
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #3a87ad;
}

.content {
    margin: 0 auto;
    text-align: left;
    width: 940px;
    background-color: White;
    padding: 20px;
    font-size: 12px;
    border-radius: 7px 7px 7px 7px;
    min-height: 180px;
    height: 80%;
}

感谢

Answer 1

<div>, <p>等每个块元素的默认宽度为100％。 这是一些块元素http://htmlhelp.com/reference/html40/block.html

的列表

如果您想要的宽度小于100％，那么您应该将一些固定宽度设置为该元素

Answer 2

block{width: 50px;} 

给它修复宽度，默认情况下，所有块元素都有100％宽度， 看看Fabizio的ans也是 “Fabrizio Calderan的”ans也是R8的灵活宽度，你可以使用他的ans

Answer 3

尝试覆盖。width css规则

中的属性block

.block{

  border-radius: 4px;
  border: 1px solid;
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #3a87ad;
  width: 10%; /* or some precise value like 40px */
}

覆盖意味着在父级继承的属性上进行写入。如果您在浏览器中使用Firebug等工具，则可以清楚地看到被覆盖的属性以及与之关联的新值。

Answer 4

尝试添加这些规则

.block {
  float: left; 
  clear: left;
  min-width: 100px; /* just to have some visual order */
}

.content {
  /* float clearing */
  height: auto; 
  overflow: hidden;
}

设置固定宽度实际上并不总是那么容易（如果您的标签长度​​大小不同，之前无法定义宽度为50或100px），使用inline-block会将这些标签放在一边 - 对齐（假设没有使用<br>）。

还要注意你有一个错字：你写了.bloc而不是.block

Answer 5

检查.bloc的拼写是.block 的jsfiddle http://jsfiddle.net/Bsa3C/1/

Answer 6

假设您提供的css是针对上面的代码，那么您应该为内容的div内容提供固定或灵活的宽度，如

.block{width: 50px;}

或

.block{width:20%;}

宽度不是从外部元素继承的，默认为100％

Answer 7

如果您不想设置宽度，也可以尝试这样做：

.block { display:inline-block }