登录 | 注册 | FAQ
Anonymous

Margin question

+ 发表回复

5 篇帖子 分页: 1 / 1


Margin question

SteveH » 周二 10月 28, 2014 9:14 am

Hello

I have two links at the top of a page. The CSS looks like this:

代码: 全选
.register, .login {
        color: #ffffff;
        float: left;
        font-family: 'Droid Sans', 'Trebuchet MS', Arial, sans-serif;
        font-size: 14px;
        }

    .register {
        margin-left: 200px;
        margin-top: 50px;
        }

    .login {
        margin-left: 230px;
        margin-top: 50px;


and the HTML for the two links is:

代码: 全选
<div class="register"><a href="Register.aspx">Register</a></div>
<div class="login"><a href="Login.aspx">Login</a></div>


The two links are NOT in a list. The two links are on the same horizontal level (both 50px from the top), and one link, 'Register' is 200px from the left while the other link, 'Login', is 230px from the left. However, this is what I can see on the Web page (please see screenshot).

I am happy with the placement of the 'Register' link, but how can I narrow the distance between both links, please?

Thank you.

Steve

附件

  1. htmlNET.jpg (28.78 KiB) 被下载 1822 次

头像

SteveH

  • 帖子: 40
  • 注册: 周一 2月 03, 2014 7:32 pm

Re: Margin question

XainPro » 周四 10月 30, 2014 10:36 am

.login {
margin-left: 50px;
margin-top: 50px; }
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm

Re: Margin question

SteveH » 周四 10月 30, 2014 9:22 pm

Thanks again, Xian!
头像

SteveH

  • 帖子: 40
  • 注册: 周一 2月 03, 2014 7:32 pm

Re: Margin question

Peterson » 周五 11月 07, 2014 11:09 am

better still use convert the div's to ul's and float the li's to the left, then apply your margin's just like this:
The HTML
<ul>
<li> <a href="(your login link)"> Login </a> </li>
<li> <a href="(your register link)"> Register </a> </li>
</ul>

The CSS
* {
margin:0;
padding:0;
}

ul {
margin:0;
padding:0;
}
ul li {
float:left;
margin-right:5px;
}

ul li a {
/* Apply your custom anchor links style-rules here */
}


I hope this solves your problem, besides this is the best option and it can save you a lot of trouble, its more semantic and very clean.
头像

Peterson

  • 帖子: 11
  • 注册: 周五 4月 25, 2014 10:12 am
  • 地址: Lagos, Nigeria

Re: Margin question

SteveH » 周五 11月 07, 2014 12:25 pm

Peterson 写道:better still use convert the div's to ul's and float the li's to the left, then apply your margin's just like this:
The HTML
<ul>
<li> <a href="(your login link)"> Login </a> </li>
<li> <a href="(your register link)"> Register </a> </li>
</ul>

The CSS
* {
margin:0;
padding:0;
}

ul {
margin:0;
padding:0;
}
ul li {
float:left;
margin-right:5px;
}

ul li a {
/* Apply your custom anchor links style-rules here */
}


I hope this solves your problem, besides this is the best option and it can save you a lot of trouble, its more semantic and very clean.


Thank you for your reply.

I tried the code but it distorted the image slider that I have next to the Register and Login links, so I have left it the way it is.

Thanks again.

Steve
头像

SteveH

  • 帖子: 40
  • 注册: 周一 2月 03, 2014 7:32 pm


+ 发表回复

分页: 1 / 1