Question

我想创建一个简单的网站，我需要一些帮助。

我有这个div

<div id="header">
<?php require "./Pages/header.html"; ?>
</div>

标题html：

<a href="index.php?p=home">Home</a>
<a href="index.php?p=shopinfo">Shop Information</a>
<a href="index.php?p=products">Products</a>
<a href="index.php?p=cart">Cart</a>
<a href="index.php?p=login">Login</a>
<a href="index.php?p=contact">Contact</a>

我想要这样的事情：

首页商店信息产品购物车登录联系

其中Home将位于div的开头，Contact将位于div的末尾，所有这些链接将具有相同的距离，但我不想使用 空格。

Answer 1

利用ul

  <ul>
     <li><a href="index.php?p=home">Home</a></li>
     <li><a href="index.php?p=shopinfo">Shop Information</a></li>
     <li><a href="index.php?p=products">Products</a></li>
     <li><a href="index.php?p=cart">Cart</a></li>
     <li><a href="index.php?p=contact">Contact</a></li> 
 </ul>

CSS

 ul li
 {
     display:inline;
     padding:5px;
 }

以下是Demo

Answer 2

有很多选择。您可以使用margin-right或padding。 JS-小提琴： http://jsfiddle.net/7Uq9y/

<a href="index.php?p=home">Home</a>
<a href="index.php?p=shopinfo">Shop Information</a>
<a href="index.php?p=products">Products</a>
<a href="index.php?p=cart">Cart</a>
<a href="index.php?p=login">Login</a>
<a href="index.php?p=contact">Contact</a>

的CSS：

a{
    margin-right: 50px;
}

Answer 3

您可以尝试使用<nav>代码

吗？

<nav>

<a href="index.php?p=home">Home</a>
<a href="index.php?p=shopinfo">Shop Information</a>
<a href="index.php?p=products">Products</a>
<a href="index.php?p=cart">Cart</a>
<a href="index.php?p=login">Login</a>
<a href="index.php?p=contact">Contact</a>

</nav>

CSS：

nav { 
      display:block; 
      margin-left:auto;
      margin-right:auto; 
  }

Answer 4

CSS使用您现有的html / php代码：

div#header a {
    margin-right: 10px; 
    width: 150px;
    display: inline-block;
}

Answer 5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<title>Test Website</title>
<style>
#menubar{
    position: relative;
    margin: 25px auto;
    padding-top: 20px;
    width: 900px;
    height: 100px;
    list-style: none;
    background: rgba(0,0,0,0.8);
    color: #ffffff;
    border-left: 2px solid #010000;
    border-right: 2px solid #010000;
}
#menubar ul {
    margin-top:15px;
}
#menubar ul li{
     display: inline;
    margin: 25px 10px 15px 15px;
    padding: 25px;
}

#menubar ul li a{
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
}

#menubar ul li a:hover{
    border-bottom: 2px solid #ffffff;
    transition: opacity .5s ease-in;
    opacity: 1;
}
</style>
</head>
<body>

    <div id="menubar">
        <ul>
          <li><a href="index.php?p=home">Home</a></li>
          <li><a href="index.php?p=shopinfo">Shop Information</a></li>
          <li><a href="index.php?p=products">Products</a></li>
          <li><a href="index.php?p=cart">Cart</a></li>
          <li><a href="index.php?p=login">Login</a></li>
          <li><a href="index.php?p=contact">Contact</a></li>
      </ul>
   </div>
</body>
</html>

enter image description here

使链接具有相同的距离

5 个答案: