Trouble with CSS Link Positioning_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-20 04:26 出处：网络

I\'m experiencing an issue with my CSS when working in Firefox.It should be pretty simple.Everything is working fine except that I cannot seem to get the links in the header aligned to the right (the

相关专题：css xhtml

I'm experiencing an issue with my CSS when working in Firefox. It should be pretty simple. Everything is working fine except that I cannot seem to get the links in the header aligned to the right (the color will change as well as any other modifications except alignment). The only way I can do it is to float it right开发者_Go百科, but that reverses the order of the links and seems wrong. Maybe there is a better way to deal with the links in the header than the span that I've used? I will have some more links in the header in another position, though, so I need to specify which links I'm referring to somehow...

Take a look at the code below:

First, the HTML:

"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">@import "layout2.css";</style>
</head>
<body>
<div id="all">
<div id="head">
<span class="headlinks">
<a href="#">Logout</a>
</span>
</div>
<div id="menu">
</div>

<div id="content">

</div>
</div>
</body>
</html>"

Now, the CSS:

/* Layout2.css */

#all {
    border: none;
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
}

.headlinks a {
    text-align:right;
        color:#ffffff;
}

#head {
    border: none;
    position: absolute;
    left: 0%;
    width: 100%;
    height: 10%;
    background-color:#336699;
}

#head h1 {
    margin-top: 1%;
    text-align:right;
}

#menu {
    border: none;
    position: absolute;
    left: 1%;
    top: 12%;
    width: 20%;
    height: 90%;
    padding-left: 1%;
    padding-right: 1%;
    background-color:#b1b2a3;
}

#content{
    border: none;
    position: absolute;
    left: 25%;
    top: 12%;
    width: 72%;
    height: 90%;
    padding-left: 1%;
    padding-right: 1%;
    background-color: #eeeeee;
}

Thanks!

Change <span class="headlinks> to a <div>, and add text-align: right to its CSS style.

You want:

#head { text-align: right; }

The head div is a block element with 100% width. Headlinks is an inline element containing one link. text-align is used on a block element its contents, not on inline elements to indicate how to place them inside their parent.

An alternative approach is to make headlinks a block level element:

span.headlinks { display: block; text-align: right; }

Which to use depends on what you want to achieve.

Try putting the 'text-align:right' on the 'head' div rather than the 'headlinks' span. This style applies to block level elements like div, not inline elements like span.