按钮应位于中央顶部,按钮旁边的表格意味着位于中央

时间:2015-04-04 06:32:27

标签: css css3

按钮应位于中央顶部,按钮旁边的表格指向中央。我已经完成了按钮但问题在于表..................![在此处输入图像描述] [1]     [1]:http://i.stack.imgur.com/3bxei.jpg

    <html>
    <body>
    <head>
    <style>

    #buttons{
        float:right;
        position:relative;
        left:-50%;
        text-align:left;

    }
    #buttons ul{
        list-style:none;
        position:relative;
        left:50%;
        width: 100%;
    }

    #buttons li{float:left;position:relative; font-size: 23px;}/* ie needs position:relative here*/

    #buttons a{
        text-decoration:none;
        margin:10px;
        background:red;
        float:left;
        border:2px outset Red;
        color:#fff;
        padding:2px 5px;
        text-align:center;
        white-space:nowrap;
    }
    #buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}




    </style>
    </head>
    <body>
    <div id="buttons">
        <ul>
            <li><a href="#"> Home</a></li>
            <li><a href="#">Add Product </a></li>
            <li><a href="#">Add Product Image</a></li>
        </ul>
    </div>

    <form>

    <table>
      <tr>
        <td>Jill</td>
        <td>Smith</td>      
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>        
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>        
        <td>80</td>
      </tr>
    </table>
    </form>

    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

你可以像这里一样使用Js fiddle 在表外加一个div和

.table-con {
  margin: 0 auto;
  clear: both;
  width: 23%;
}