html - Html css 需要更改为看起来像发布的图像(在 dotnet 核心应用程序中实现)
问题描述
基于 html 和 css 显示的子菜单如 capture1 所示,其中人字形未对齐。但应根据 capture2 对齐。
捕获 1:
捕获 2:
HTML:
<div id="submenu" class="submenu-manure-wizard" style="background-color:#f2f2f2">
<ul class="submenu-manure-wrapper submenu-manure-wizard-list clearfix">
@foreach (var item in Model.subMenuOptions)
{
if (@item.MainMenuId == 2)
{
<li id="@item.Controller@item.Action@item.Id" class="submenu-manure-wizard-item" style="display:none">
<a id="eMenu" href='@Url.Action(@item.Action, @item.Controller)'>
<span class="wizard-name" style="vertical-align: text-top">@item.Name</span>
<div style="width: 30px;height:19px;display:block">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 199" style="enable-background:new 0 0 200 199;" xml:space="preserve"><style type="text/css">
.st0 {
fill: none;
stroke: #000000;
stroke-width: 11;
stroke-miterlimit: 5;
}
</style><polyline class="st0" points="33.5,-0.5 136,102 36.5,201.5 " /></svg>
</div>
</a>
</li>
}
}
</ul>
<ul class="submenu-fields-wrapper submenu-manure-wizard-list clearfix">
@foreach (var item in Model.subMenuOptions)
{
if (@item.MainMenuId == 3)
{
<li id="@item.Controller@item.Action@item.Id" class="submenu-fields-wizard-item" style="display:none">
<a id="eMenu" href='@Url.Action(@item.Action, @item.Controller)'>
<span class="wizard-name" style="vertical-align: text-top">@item.Name</span>
@if (!(@item.Id == 5))
{
<div class="wizard-item" style="width: 30px;height:19px;display:block">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 199" style="enable-background:new 0 0 200 199;" xml:space="preserve"><style type="text/css">
.st0 {
fill: none;
stroke: #000000;
stroke-width: 11;
stroke-miterlimit: 5;
}
</style><polyline class="st0" points="33.5,-0.5 136,102 36.5,201.5 "/></svg>
</div>
}
</a>
</li>
}
}
</ul>
</div>
CSS:
.wizardsubmenu {
padding: 0px 0;
border-bottom: 1px solid #b0cee2;
}
#submenu-manure-width {
width: 20%;
}
.submenu-manure-wrapper {
max-width: 1210px;
max-height: 20px;
margin: 0 auto;
padding: 0 150px;
padding-left: 150px;
}
.submenu-fields-wrapper {
max-width: 930px;
margin: 0 auto;
padding: 0 15px;
}
.submenu-manure-wizard {
/*padding: 5px 0;*/
border-bottom: 1px solid #b0cee2;
}
.submenu-manure-wizard-list {
list-style: none;
text-align: center;
}
.submenu-manure-wizard-item {
float: left;
width: 25%;
position: relative;
}
.submenu-fields-wizard-item {
float: left;
width: 50%;
position: relative;
}
附加图像...需要突出显示子菜单项的位置。SVG 图像需要与子菜单项对齐。
我有主菜单和子菜单。捕获显示子菜单。子菜单正在从主菜单的输出中加载。我在子菜单项之后使用 svg 图像,这导致 svg 页面如图所示浮动。我附上了我用过的css和html页面。
解决方案
推荐阅读
- image - 将文本包裹在图像顶部的 C# 代码 - OpenXml
- java - IntelliJ 重构为内联冗余数据类
- java - 如何在 Java 中连接 CloudFront?
- javascript - 我单击了我的彩色按钮图像,但它们没有出现在控制台的数组中
- reactjs - Axios 获取请求不起作用,但发布请求起作用?
- webpack - (多错误)找不到模块:错误:无法解析“babel/loader”
- c - 使用 SAR ADC 进行相位角测量
- python - 运行随机森林分类器时出错
- sqlite - system.missingmethodexception: '方法未找到:void sqlite.sqliteconnection..ctor(string,sqlite.sqliteopenflags,bool,object)'
- ansible - 退出 Ansible 循环