如何将LI垂直对齐中间

时间：2014-01-29 17:54:06

标签： html css html-lists vertical-alignment

我的HTML UL LI标签排列如下：

<html>
   <head>
   </head>
   <body style="margin: 0px;">
    <ul style="display: table; width:98%; margin: 5px; padding: 0; min-width:500px;">
     <li style="display:table-row; padding: 0; margin: 0;">
       <ul style="padding: 0; margin: 0;">
          <li style="float:left; text-align:center; display:table-cell; width:5%; min-height: 50px; ">A</li>
          <li style="float:left; display:table-cell; width:87%; min-height: 50px; ">B</li>
          <li style="float:left; text-align:center; display:table-cell; width:8%; min-height: 50px; "><input type="submit" name="one" id="one" value="one"></li></ul>
    </li>
    <li style="display:table-row; padding: 0; margin: 0;">
       <ul style="padding: 0; margin: 0;">
          <li style="float:left; display:table-cell; width:92%; min-height: 100px; ">
            <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;">Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. SamplText here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. </div>
         </li>
         <li style="float:left;text-align:center; display:table-cell; width:8%; min-height: 100px; "> &nbsp; C</li>
     </ul>
    </li>
    <li style="display:table-row; padding: 0; margin: 0;">
      <ul style="padding: 0; margin: 0;">
        <li style="float:left; text-align:center; display:table-cell; width:5%; min-height: 100px; "><input type="radio" name="optia" value="a" id="optia">A</li>
         <li style="float:left; display:table-cell; width:87%; min-height: 100px; "><div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;">Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. </div></li>
         <li style="float:left; text-align:center; display:table-cell; width:8%; min-height: 100px; "> &nbsp; C</li>
         </ul>
        </li>
      </ul>
   </body>
</html>

它提供如下所述的输出：

enter image description here

如何将最后一列中的RADIO Box和文本“C”与LI垂直对齐;沿红线画？

2 个答案:

答案 0 :(得分：0)

你想要添加一个vertical-align：bottom;将它与红线对齐。但我真的会避免使用内联CSS，因为它会让你的html看起来干净利落。 

style="vertical-align: bottom" // add to your li for the C

答案 1 :(得分：0)

添加TOP＆amp;底部填料;我设法将单选按钮与LI垂直对齐。我不认为这是万无一失的解决方案;但作为解决方案，它的工作原理。

相关问题
最新问题