Question

我在mvc中有列表，我想用块内联。

清单 -

 <ul>
     <li>
@foreach (var item in Model) {
  <img src="@item.cardFilePath"/>
}
    </li>
</ul>

CSS 我在这里试过 -

li
{
list-style-type: none; 
display: inline-block; 
float: left;
margin: 0px 24px;
padding-left: 24px;
}

基本上会有图像通过模型列表来动态内联。

如何以列表形式内联这些图像。

Answer 1

似乎有什么问题？尝试使用 FIDDLE

    <ul>
    @foreach(var item in model)
    {
        <li>
            <img src="@item.cardFilePath" />
        </li>
    }
    </ul>

ul {
    list-style:none;
    padding:0;
}
ul li {
    float:left;
    display:block;
    margin-right:10px;
}
ul li:last-child{
    margin-right:0;
}

Answer 2

你可以尝试这个代码..这里是小提琴链接。 http://jsfiddle.net/PBrU8/15/

ul {
    list-style-type:none;
    padding:0;
}
ul li {
    display: inline-block; 
    margin: 0 5px 0;
}

为什么我喜欢使用display:inline-block而不是float，请阅读本文。

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

如何在mvc中内联列表

2 个答案: