span margin-right失效 margin-left正常

当在CSS中为非行尾元素设置margin-right时,外边距可能不会如预期工作。这个问题通常发生在元素浮向右侧时。解决方法是为元素添加`float:right`属性。了解这一CSS布局特性对于前端开发者调试和优化页面布局至关重要。

对于span,margin-left是ok的,margin-right失效。
margin-right准确来说是 距离父元素的外边距时失效【即最右边元素设置靠右时】,当不是该行最后边元素时,是正常使用margin-right的
解决办法
设置样式:float:right

<div class="jsonstyle" v-if="seleopt == 'parametertemp'"> <div class="onebox">{</div> <div class="middlebox"> special_name: <span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>专项定制名称</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip></span ><d-input v-model="bobyexaps.special_name" /> </div> <div> creator: <span class="listspan">{{ Storage.get('trust_v_user').account }}</span> </div> <div> sdvType:<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>工程类型</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> <span class="listspan fontcolor">{{ formModel.projectType }}</span> </div> <div class="middlebox"> check_type:<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>验证方式</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> <d-input v-model="bobyexaps.check_type" /> </div> <div> guc:<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>guc配置文件名称</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> <span class="listspan fontcolor">{{ formModel.gucType }}</span> </div> <div> exec_duration:<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>任务执行控制时长</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> <span :class="changetime() != '' && orselect ? 'listspan fontcolor' : 'listspan'" >{{ orselect ? changetime() : '' }}分钟</span > </div> <div> exec_round:<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>任务执行控制轮次</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> <span :class="formModel.executionround != 1 && orselect ? 'listspan fontcolor' : 'listspan'"> {{ orselect ? formModel.executionround : 1 }} </span> </div> <div> exit_strategy: <span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>任务轮次退出策略</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip></span ><span class="listspan fontcolor">{{ orselect ? formModel.strategy : '' }}</span> </div> <div class="twobox">steps: {</div> <div class="threebox"> pre_build: { <span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>任务前置操作</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> </div> <div class="fourbox"> depend_components: { <span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>任务依赖组件</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> </div> <div class="fivebox"> framework: { <span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>执行框架(使用grtmgr必填)</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip></span ><span ><i :class="!orview.one ? 'icon icon-code-editor-add' : 'icon icon-code-editor-less'" style="color: red; cursor: pointer; margin-left: 5px; margin-top: 5px" @click="orview.one = !orview.one" ></i ></span> </div> <div class="sixbox" v-if="orview.one"> name: <span> <d-input style="width: 400px" v-model="bobyexaps.frameworkname" /></span> </div> <div class="sixbox" v-if="orview.one"> url: <span><d-input style="width: 400px" v-model="bobyexaps.frameworkurl" /></span> </div> <div class="sixbox" v-if="orview.one"> branch: <span><d-input v-model="bobyexaps.frameworkbranch" style="width: 400px" /></span> </div> <div class="fivebox">}</div> <div class="fivebox"> script_git: { <span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>测试脚本代码仓</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> <span ><i :class="!orview.two ? 'icon icon-code-editor-add' : 'icon icon-code-editor-less'" style="color: red; cursor: pointer; margin-left: 5px; margin-top: 5px" @click="orview.two = !orview.two" ></i ></span> </div> <div class="sixbox" v-if="orview.two"> name: <span><d-input style="width: 400px" v-model="bobyexaps.script_gitname" /></span> </div> <div class="sixbox" v-if="orview.two"> url: <span><d-input style="width: 400px" v-model="bobyexaps.script_giturl" /></span> </div> <div class="sixbox" v-if="orview.two"> branch: <span><d-input style="width: 400px" v-model="bobyexaps.script_gitbranch" /></span> </div> <div class="fivebox">}</div> <div class="fivebox"> third_party: [<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>pip三方库(填写pip库名称)</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> </div> <div v-for="(item, index) in partyarr" class="sixbox"> <d-input v-model="partyarr[index]" /> <i class="icon icon-codehub-delete-op" style="color: red; cursor: pointer; margin-left: 10px; margin-top: 10px" @click="delepart(index)" ></i> </div> <i class="icon icon-code-editor-add" style="color: red; cursor: pointer; margin-left: 100px; margin-top: 10px" @click="addpart()" >添加</i > <div class="fivebox">]</div> <div class="fourbox">}</div> <div class="fourbox">params: {</div> <div class="fivebox"> commands:<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>前置操作命令</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> <span class="listspan fontcolor">{{ values2.includes('前置操作') ? formModel.Preceding : '' }}</span> </div> <div class="fiveonebox" v-for="(item, index) in onearr"> <d-input v-model="onearr[index].key" style="width: 85px" />: <span><d-input v-model="onearr[index].value" /></span> <i class="icon icon-codehub-delete-op" style="color: red; cursor: pointer; margin-left: 10px; margin-top: 10px" @click="deleparms(index, 'one')" ></i> </div> <i class="icon icon-code-editor-add" style="color: red; cursor: pointer; margin-left: 100px; margin-top: 10px" @click="addparms('steps.pre_build.params', 'one')" >添加</i > <div class="fourbox">}</div> <div class="threebox">}</div> <div class="threebox"> deploy: {<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>任务部署操作</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> </div> <div class="fourbox"> packages: {<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>软件包信息</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> </div> <div class="fivebox"> os_info: <span><d-input v-model="bobyexaps.packagesos_info" style="width: 400px" /></span> </div> <div class="fivebox"> module: <span><d-input v-model="bobyexaps.packagemodule" style="width: 400px" /></span> </div> <div class="fivebox"> version: <span v-if="formModel.radio == '0'">{{ bobyexaps.packageversion }}</span ><span v-else><d-input v-model="bobyexaps.packageversion" /></span> </div> <div class="fivebox"> deploy: <span><d-input v-model="formModel.clusterType" style="width: 400px" /></span> </div> <div class="fourbox">params: {</div> <div class="fivebox"> commands:<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>部署操作命令</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> <span class="listspan fontcolor">{{ values2.includes('部署操作') ? formModel.Deployment : '' }}</span> </div> <div class="fiveonebox" v-for="(item, index) in twoarr"> <d-input v-model="twoarr[index].key" style="width: 85px" />: <span><d-input v-model="twoarr[index].value" /></span> <i class="icon icon-codehub-delete-op" style="color: red; cursor: pointer; margin-left: 10px; margin-top: 10px" @click="deleparms(index, 'two')" ></i> </div> <i class="icon icon-code-editor-add" style="color: red; cursor: pointer; margin-left: 100px; margin-top: 10px" @click="addparms('steps.deploy.params', 'two')" >添加</i > <div class="fourbox">}</div> <div class="threebox">}</div> <div class="threebox"> build: {<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>任务执行操作</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> </div> <div class="fourbox"> <span> <d-form :data="formModelcopye" ref="formRefone" :rules="rulesone"> <d-form-item field="typeonecopy" label="type:" ><span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>任务执行类型</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> <d-select size="sm" v-model="formModelcopye.typeonecopy" :options="['grtmgr', 'commands', 'use_cases']" /> </d-form-item> </d-form> </span> </div> <div class="fourbox">params: {</div> <div class="fivebox"> commands:<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>执行操作命令</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> <span><d-input v-model="bobyexaps.buildcommands" style="width: 400px" /></span> </div> <div class="fiveonebox" v-for="(item, index) in threearr"> <d-input v-model="threearr[index].key" style="width: 85px" />: <span><d-input v-model="threearr[index].value" /></span> <i class="icon icon-codehub-delete-op" style="color: red; cursor: pointer; margin-left: 10px; margin-top: 10px" @click="deleparms(index, 'three')" ></i> </div> <i class="icon icon-code-editor-add" style="color: red; cursor: pointer; margin-left: 100px; margin-top: 10px" @click="addparms('steps.build.params', 'three')" >添加</i > <div class="fourbox">}</div> <div class="threebox">}</div> <div class="threebox"> post_build: {<span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>任务后置操作</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip ></span> </div> <div class="fourbox">params: {</div> <div class="fivebox"> commands: <span> <d-tooltip> <template #content> <div style="display: flex; flex-direction: column; font-size: 12px"> <div>后置操作命令</div> </div> </template> <i class="icon icon-helping" style="color: gray; cursor: pointer; margin-left: 5px; margin-top: 5px" ></i></d-tooltip></span ><span class="listspan fontcolor"> {{ values2.includes('后置操作') ? formModel.Posterior : '' }}</span> </div> <div class="fiveonebox" v-for="(item, index) in fourarr"> <d-input v-model="fourarr[index].key" style="width: 85px" />: <span><d-input v-model="fourarr[index].value" /></span> <i class="icon icon-codehub-delete-op" style="color: red; cursor: pointer; margin-left: 10px; margin-top: 10px" @click="deleparms(index, 'four')" ></i> </div> <i class="icon icon-code-editor-add" style="color: red; cursor: pointer; margin-left: 100px; margin-top: 10px" @click="addparms('steps.post_build.params', 'four')" >添加</i > <div class="fourbox">}</div> <div class="threebox">}</div> <div class="twobox">}</div> <div class="onebox">}</div> </div>
10-01
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值