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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!