Question

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

看我已经使用id nb作为ul所以我需要css根据

为什么保证金权利不起作用=“保证金权利：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>

Answer 1

似乎你想要水平对齐然后你可以简单地使用flex。其中display: flex添加ul。

如下所示

＆＃13;

 #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;
}

＆＃13;

<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>

＆＃13;

输出

注意：如果您不想wrap，只需从flex-wrap: wrap删除ul。

希望这会以某种方式帮助你（y）。

Answer 2

对于这个问题，我应该在ul中使用iterator并使第一个li为常量（没有内联样式），然后为内联样式给出的休息列表

<ul id="nb">
    <s:iterator value="noticeboardRecords" status="rowStatus">

    <s:if test="#rowStatus.index==0">
    <li style="width:250px;">
     <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-left: 100px;">
     <a href="#" style="background: #ffc">
     <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  style="margin-top: 100px;margin-left: 100px">
     <a href="#" style="background: #ffc">
     <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   style="margin-top:50px;margin-left: 100px;">
     <a href="#" style="background: #ffc">
     <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  style="margin-top:50px;margin-right: 500px;width:250px;">
     <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:iterator>
  </ul>

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

2 个答案:

输出