1

我正在使用 ASP.NET MVC 3 并从模型构建我的 html 页面，如下所示：

foreach (var item in Model.OfficialHolidaysViewModel.OfficialHolidaysForCurrentYear) 
{
   <li class="date-label"  data-id=@item.OfficialHolidayID data-date=@item.ShortDateString data-type="OfficialHoliday">
      <span class=date-text>@item.ShortDateString</span>
      <img alt="close icon" class="date-close-icon" src="/Content/Images/x_icon.png" />
   </li>
}

这将呈现和 html 元素，例如：

     <li class="date-label" data-id="5" data-date="5/28/2013" data-type="OfficialHoliday">
        <span class="date-text">5/28/2013</span>
        <img alt="close icon" class="date-close-icon" src="/Content/Images/x_icon.png">
     </li>

这看起来像：

在此处输入图像描述 但是，当我用 jquery 插入一个新元素时：

$('#OfficialHolidaysCurrentYear').append(
       '<li class="date-label" data-id="' + dateID + '" data-date="' + dateString + '" data-type="' + dataType +'">' +
            '<span class="date-text">' + toRomanianLiteralFormat(dateString) + '</span>' +
            '<img alt="close icon" class="date-close-icon" src="/Content/Images/x_icon.png" />' +
       '</li>')

这得到正确参数化，结果是 html：

        <li class="date-label" data-id="542" data-date="03/02/2013" data-type="OfficialHoliday">                                         
           <span class="date-text">02/Mar/2013</span>
          <img alt="close icon" class="date-close-icon" src="/Content/Images/x_icon.png">
        </li>

这在浏览器中看起来像：

在此处输入图像描述 我不明白为什么它们看起来不同（注意第一张图片中日期文本和 x 图标之间的差距），根据我的样式表，第二个是正确的....但是为什么第一个看起来不一样他们有相同的html和css？？？

顺便说一句，这是我的样式表（.date-text 没有应用样式）：

.date-label
{
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #aaa;
    border-color: rgba(0, 0, 0, 0.3);
    background: #fff;
    color: rgba(0, 0, 0, 0.8);
    font-size: 16px;
    font-weight: normal;
    display: inline-block;
    line-height: 1.3;
    padding: 1px 0px 1px 0px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; 
    margin:0px 5px 0px 0px;
    box-shadow: 1px 1px 1px #555555;
    -moz-box-shadow: 1px 1px 1px #555555;
}

.date-close-icon
{
    height:11px;
    width:11px;
    cursor:pointer;
}

更新 ：

这是 HTML 回车的问题，有关详细信息，请参阅 Aleksandr M 的答案中的链接！

4

2 回答 2

1

如果你想要它没有间隙，只需编写没有回车的代码，li就像这样

foreach (var item in Model.OfficialHolidaysViewModel.OfficialHolidaysForCurrentYear) 
{
   <li class="date-label"  data-id=@item.OfficialHolidayID data-date=@item.ShortDateString data-type="OfficialHoliday">
      <span class=date-text>@item.ShortDateString</span><img alt="close icon" class="date-close-icon" src="/Content/Images/x_icon.png" />
   </li>
}

请参阅此链接： http: //www.netmechanic.com/news/vol1/html_no3.htm

从理论上讲，HTML 不会关注源文档中的空白。实际上，您的浏览器会将回车解释为单个空格字符。

于 2013-03-06T10:12:43.127 回答
0

您的问题似乎是由换行符（在呈现的 html 文档中插入空格）引起的。如果您不需要这两个元素的空间，那么您可以将这两个元素浮动到左侧，它将忽略该空间。

于 2013-03-06T10:18:20.690 回答