div宽度设置无效问题解决

问题:div设置宽高始终无效,

解决: 

方法1/给div加入样式：float:left;//向左浮动，宽度设置有效，不能在目标位置显示。

float:left;

方法2/

display:inline-block;

给div加入样式：display:inline-block;//宽度设置有效，可设置任意位置显示。

原因：

块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性。

而内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，对inline元素设置width,height属性无效。

我们有个时候既希望元素具有宽度高度特性，又具有同行特性，这个时候我们就要用inline-block。

inline-block属性，可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。

我的原因是 引用日历elementui样式 修改每一天的小格宽高没用

<el-calendar v-model="value">
        <template slot="dateCell" slot-scope="{ date, data }">
          <el-popover
            popper-class="popoverBackB"
            placement="top"
            @show="handerShow(date, data)"
            width="200"
            trigger="hover"
            :content="dateText"
          >
            <div class="calendar-day" slot="reference" @click="clickData">
              {{ data.day.split("-").slice(2).join("-") }}
            </div>
          </el-popover>
        </template>
      </el-calendar>

我需要改的地方的样式

.el-calendar-table td.is-selected {
    background-color: red;
    color: #fff;
    display: inline-block;
    width: 38px !important;
    height: 36px !important;
  }

加入display:inline-block之后再设置宽高就可以设置了

效果图:

 借鉴:div宽度设置无效问题解决_weixin_30663471的博客-CSDN博客