html - 如何在迭代时并排打印html列表元素

标签 html css

我正在尝试做布告栏，所以我使用了一个在预定义列表元素时水平方向正确的布告栏。但我正在尝试动态添加数据，然后垂直打印便签。

这是 fiddle https://jsfiddle.net/z6u81mp4/

看到我已经为 ul 使用了 id nb，所以我需要 css 根据它

为什么 margin right 不起作用 style="margin-right: 500px;"

HTML

<ul>
    <li>
      <a href="#">
        <h2>Title #1</h2>
        <p>Text Content #1</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #2</h2>
        <p>Text Content #2</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #3</h2>
        <p>Text Content #3</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #4</h2>
        <p>Text Content #4</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #5</h2>
        <p>Text Content #5</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #6</h2>
        <p>Text Content #6</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #2</h2>
        <p>Text Content #2</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #7</h2>
        <p>Text Content #7</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #8</h2>
        <p>Text Content #8</p>
      </a>
    </li>
  </ul>

CSS

 #nb>li{
  list-style:none;
}
#nb{
  overflow:hidden;
  padding:3em;
    display: flex;
}
#nb>li>a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
 /*  height:10em; */
 /*  width:10em; */
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}
#nb>li{
  margin:1em;
  float:left;
  display: flex;
}
#nb>li>h2{
  font-size:140%;
  font-weight:bold;
  padding-bottom:10px;
}
#nb>li>p{
  font-family:"Reenie Beanie",arial,sans-serif;
  font-size:180%;
}
#nb>li>a{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
#nb>li:nth-child(even)>a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
#nb>li:nth-child(3n)>a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}
#nb>li:nth-child(5n)>a{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
#nb>li>a:hover,#nb>li>a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}

迭代中使用的代码

<s:iterator value="noticeboardRecords" status="rowStatus">
                                            <ul id="nb">        
                                        <s:if test="#rowStatus.index == 0">

                                            <li style="width:200px;">
                                            <a href="#">                                                
                                                    <h5><s:date name="noticeDate" format="dd/MMM/yyyy" /></h5>
                                                    <h5><b><s:property value="noticeType" /></b></h5>
                                                    <p><s:property value="noticeMessage" /></p>
                                            </a>                                            
                                            </li>                                           

                                        </s:if>     

                                        <s:if test="#rowStatus.index == 1">

                                            <li style="margin-right: 500px;">
                                            <a href="#">                                                
                                                    <h5><s:date name="noticeDate" format="dd/MMM/yyyy" /></h5>
                                                    <h5><b><s:property value="noticeType" /></b></h5>
                                                    <p><s:property value="noticeMessage" /></p>
                                            </a>                                            
                                            </li>               


                                        </s:if> 


                                        <s:if test="#rowStatus.index == 2">

                                            <li>
                                            <a href="#">                                                
                                                    <h5><s:date name="noticeDate" format="dd/MMM/yyyy" /></h5>
                                                    <h5><b><s:property value="noticeType" /></b></h5>
                                                    <p><s:property value="noticeMessage" /></p>
                                            </a>                                            
                                            </li>               


                                        </s:if> 


                                        <s:if test="#rowStatus.index == 3">

                                            <li>
                                            <a href="#">                                                
                                                    <h5><s:date name="noticeDate" format="dd/MMM/yyyy" /></h5>
                                                    <h5><b><s:property value="noticeType" /></b></h5>
                                                    <p><s:property value="noticeMessage" /></p>
                                            </a>                                            
                                            </li>               


                                        </s:if> 

                                        <s:if test="#rowStatus.index ==4">

                                            <li>
                                            <a href="#">                                                
                                                    <h5><s:date name="noticeDate" format="dd/MMM/yyyy" /></h5>
                                                    <h5><b><s:property value="noticeType" /></b></h5>
                                                    <p><s:property value="noticeMessage" /></p>
                                            </a>                                            
                                            </li>           

                                        </s:if> 


                                            </ul>                                   
                                    </s:iterator>

最佳答案

似乎你想要水平对齐，那么你可以简单地使用 flex。 将 display: flex 添加到 ul。

类似下面的内容

 #nb>li{
  list-style:none;
}
#nb{
  padding:3em;
  display: flex;
}
#nb>li>a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
 /*  height:10em; */
 /*  width:10em; */
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}
#nb>li{
  margin:1em;
  float:left;
  display: flex;
}
#nb>li>h2{
  font-size:140%;
  font-weight:bold;
  padding-bottom:10px;
}
#nb>li>p{
  font-family:"Reenie Beanie",arial,sans-serif;
  font-size:180%;
}
#nb>li>a{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
#nb>li:nth-child(even)>a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
#nb>li:nth-child(3n)>a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}
#nb>li:nth-child(5n)>a{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
#nb>li>a:hover,#nb>li>a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}
<ul id="nb">
    <li>
      <a href="#">
        <h2>Title #1</h2>
        <p>Text Content #1</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #2</h2>
        <p>Text Content #2</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #3</h2>
        <p>Text Content #3</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #4</h2>
        <p>Text Content #4</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #5</h2>
        <p>Text Content #5</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #6</h2>
        <p>Text Content #6</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #2</h2>
        <p>Text Content #2</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #7</h2>
        <p>Text Content #7</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #8</h2>
        <p>Text Content #8</p>
      </a>
    </li>
  </ul>

输出

enter image description here

Note: if you dont want to wrap them simply remove flex-wrap: wrap from ul.

希望这会以某种方式(y)帮助您。

关于html - 如何在迭代时并排打印html列表元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41117225/

上一篇：javascript - 更新到 Angular Material 1.1.1 时丢失色调和其他样式

下一篇：javascript - 使用javascript改变背景颜色

相关文章：

javascript - 如何使用 php 和 ajax 保存 Canvas 图像数据？

java - 尝试获取 CSS 文件时出现 "Request method GET not supported"错误

html - 如何在底 Angular 的广告上显示链接文本

html - 使用 CSS content 属性设置图像并使其不拉伸(stretch)

html - 具有多个元素的响应式标题 slider

jquery - 如何将表格行中的文本居中，使其始终位于屏幕可见区域的中心

javascript - 如何使用 data-href 打开新标签页

javascript - 下拉字段中插入的文本未反射(reflect)

html - 使固定位置元素不超过屏幕上的某个阈值

javascript - 切换类在 IE 或 Edge 中不起作用

©2024 IT工具网  联系我们