Debug: calc() 未生效 <= 内嵌样式表达式需使用空格分隔

MarkTime: 2024-06-25 17:10

LogTime: 2024-11-09 13:58:02


结论

calc()内的表达式 需要使用 空格分隔符,

即 更正 calc(100%-100px-10px); => calc(100% - 100px - 10px); 即可





<!-- 原错误代码 -->
<div class="layout-search" style="width: 100%;">
  <el-row type="flex">
    <el-col :span="8">
      <span class="mlft10" style="width: 100px;"><span class="layout-search-label">起始时间</span></span>
      <!-- 更正为 style="width: calc(100% - 100px - 10px);"  -->
      <el-date-picker 
        style="width: calc(100%-100px-10px);" 
        v-model="pageParam.condition.subSETimeRange" 
        type="datetimerange"
        format="YYYY-MM-DD HH:mm:ss" 
        value-format="YYYY-MM-DD HH:mm:ss" 
        range-separator="至" 
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </el-col>
    <el-col :span="8">
      <span class="mlft10" style="width: 100px;"><span class="layout-search-label">内容</span></span>
      <el-input 
        style="width: calc(100%-100px-10px) !important;" 
        v-model="pageParam.condition.warningContent" 
        placeholder="请输入内容"
        clearable 
        maxlength="32"
        >
      </el-input>
    </el-col>
    <el-col :span="8">
      <span class="mlft10" style="width: 100px;"><span class="layout-search-label">标题</span></span>
      <el-input 
        style="width: calc(100%-100px-10px);" 
        v-model="pageParam.condition.title" 
        placeholder="请输入标题" 
        clearable 
        maxlength="32"
        >
      </el-input>
    </el-col>
  </el-row>
<div>
posted @   LinForest_zZ  阅读(2)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示