发表新帖
发表新帖

Position elements with the div tag

前端 未结
关注
5 1601
失恋的感觉
失恋的感觉 2021-01-28 03:50 
  
  

  


        

                      

              相关标签:
5条回答
  • 日久生厌
    2021-01-28 04:05

    position: absolute; will help you get that interesting layout.

    0 讨论(0)
  • 伪装坚强ぢ
    2021-01-28 04:08

    For declarations like left and top to make any sense, you need to apply them to positioned elements:

    #foo {
  position:absolute;
  top:10%;
  left:25%;
}

    Your elements don't appear to have be positioned as absolute or relative.

    There are many other problems with your markup as well that will cause many, many problems. All of your markup should go within the body tag:

    <!DOCTYPE html>
<html>
  <head>
    <title>Foo Example</title>
    <style type="text/css">
      #foo { 
        position:absolute; 
        top:10%; left:10%; 
        background:yellow;
        padding:10px 20px;
        border:1px solid #000;
        color:#000; 
        width:30% 
      }
    </style>
  </head>
  <body>
    <!-- all markup goes here -->
    <div id="foo">Hello World</div>
    <!-- all markup goes here -->
  </body>
</html>

    Online Demo: http://jsbin.com/efukol/edit

    0 讨论(0)
  • 南笙
    2021-01-28 04:15

    There are a few things going on here:

    1. The A element is inline, and things will sit right next to each other, like BlogVideosHomeContactAbout MDB1, as I am sure you have already seen.

    2. This LOOKS like a list or menu, so use the appropriate markup. List markup would be best, or if you want to try HTML5, there is already the NAV element with is specifically for that purpose.

    3. I notice that you are not using URLs in the a elements. It is better to use something which will not generate a 404 on the server.

    4. Why are you bothering with target="_self" unless you are using frames, and if that is the case, please Google for Frames are Evil. If not, then A) _self is redundant, B) if you are using a Strict doctype, the target attribute is deprecated for accessibility reasons.

    5. Naming your CSS file index.css might get you in trouble if the server is configured to use index. with ANY suffix to as the default page. Better would be something like style.css.

    Now to get these things going across, you can go a few ways:

    /* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}

/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}
    0 讨论(0)
  • 半阙折子戏
    2021-01-28 04:16

    You are using 'left:' but you didn't include 'position:absolute'? Try that maybe it might help.

    0 讨论(0)
  • 走了就别回头了
    2021-01-28 04:20

    quick to do ...

    #HeadPanel
{
    display: inline;
    width: 100%;
}

.HeadPanelElement
{
    width: 10%;
    /* or 
    padding: 10px; */
}

    the real factor here is the display: inline; which will layout the div in a side by side fashion.

    0 讨论(0)
 看不清?
提交回复
热议问题