在剃须刀视图中添加html元素

我对剃刀很新颖我总是用aspx页面工作，我想要有一个带有2个文本和一个提交按钮的登录表单我试图添加一个方形菜单渐变和胡佛，但我卡住了。在剃须刀视图中添加html元素

这是我Login.cshtml：

@model Magazzino.Models.LoginViewModel 
@{ 
ViewBag.Title = "Login"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

@if (TempData["message"] != null) 
{ 
<script type="text/javascript"> 
    alert(@Html.Raw(Json.Encode(TempData["message"]))); 
</script> 
} 

@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(true) 
    @Html.AntiForgeryToken() 
    <div> 
     <table> 
     <tr> 
      <td>@Html.LabelFor(a => a.Username)</td> 
      <td>@Html.TextBoxFor(a => a.Username)</td> 
      <td>@Html.ValidationMessageFor(a => a.Username)</td> 
     </tr> 
     <tr> 
      <td>@Html.LabelFor(a => a.Password)</td> 
      <td>@Html.PasswordFor(a => a.Password)</td> 
      <td>@Html.ValidationMessageFor(a => a.Password)</td> 
     </tr> 
     <tr> 
      <td></td> 
      <td> 
       <input type="submit" value="Login" /> 
      </td> 
      <td></td> 
     </tr> 
    </table> 
</div> 
} 

<div style="background: grey"> 
<div style="float: left; margin-left: 35%; width: 15%; background: linear-gradient(red, orange);"> 
    <div style="height: 30%; border: 1px solid;"> 
     @Html.ActionLink("Contatti", "Contatti") 
    </div> 
    <div style="height: 30%; border: 1px solid;"> 
     @Html.ActionLink("Dove Siamo", "DoveSiamo", null, new { @style = "position: relative; top: 90%;" }) 
    </div> 
</div> 
<div style="float: right; margin-right: 35%; width: 15%; text-align: right; background: linear-gradient(green, yellow);"> 
    <div style="height: 30%; border: 1px solid;"> 
     @Html.ActionLink("Informazioni", "Informazioni") 
    </div> 
    <div style="height: 30%; border: 1px solid;"> 
     @Html.ActionLink("Chi Siamo", "ChiSiamo", null, new { @style = "position: relative; top: 90%;" }) 
    </div> 
</div>

在这方面谷歌和火狐呈现在一个正常的方式与ActionLink的股利，但IE不会呈现高度，所以我加了页面布局：

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
</head> 
<body> 
    <div> 
     @RenderBody() 
    </div> 
</body> 
</html> 

@RenderSection("scripts", required: false)

现在IE，Chrome和Firefox的渲染与不高的动作股利，我想这不是把未链接到其中的HTML元素的正确方法电子表格，但我如何将其他HTML元素内已经有一个表格的剃刀页面？

谢谢

来源

2015-12-27 Chrix1387

我没有看到你的HTML标记的任何问题。究竟是什么问题？描述使它听起来像一个CSS样式问题，与服务器端视图引擎无关。 – David

问题是，只有当我把它放在包含表单的div内时，才会出现背景灰色，如果我把它放在我需要在开始表单外的div中，因为div全部搞乱了，它不会显示， t设置其他div的高度。 – Chrix1387

我认为这主要是CSS和HTML的问题。

- 我没有看到结束标记为<div style="background: grey">，我会验证它是否正常关闭。
- 你有两个浮动的div，我会放一个额外的标签<div style='clear:both'>关闭<div style="background: grey">标记之前。这将清除该点后的浮动。
- 1和2后，如果您没有看到灰色的背景，我会怀疑内的div覆盖的背景下，如果是的话，我将在父标签添加一些填充，例如<div style="background: grey; padding: 10px;">

来源

2015-12-27 18:10:44

在剃须刀视图中添加html元素

回答

相关问题