Html 使链接具有相同的距离_Html_Hyperlink_Distance

Html 使链接具有相同的距离

html hyperlink

Html 使链接具有相同的距离,html,hyperlink,distance,Html,Hyperlink,Distance,我正在尝试做一个简单的网站，我需要一些帮助我有这个部门 <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="in

我正在尝试做一个简单的网站，我需要一些帮助

我有这个部门

<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的begining处，Contact将在div的末尾，所有这些链接将具有相同的距离，但我不想使用空格。

有很多选择。您可以使用右边距或填充。 JS小提琴：

利用

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>

这是您可以尝试使用

标记吗

<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>

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

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


测试网站
#梅努巴{
位置：相对位置；
保证金：25像素自动；
填充顶部：20px；
宽度：900px；
高度：100px；
列表样式：无；
背景：rgba（0,0,0,0.8）；
颜色：#ffffff；
左边框：2px实心#010000；
右边框：2px实心#010000；
}
#美努巴保险公司{
边缘顶部：15px；
}
#梅努巴乌利酒店{
显示：内联；
利润率：25px 10px 15px 15px；
填充：25px；
}
#米努巴乌利亚酒店{
字体大小：粗体；
文字装饰：无；
颜色：#ffffff；
字体大小：15px；
}
#菜单栏ulli a：悬停{
边框底部：2个实心#ffffff；
过渡：不透明度。5s缓解；
不透明度：1；
}

相同的距离，是指相同的宽度吗？使用不可见的table@Chitowns24不推荐使用表格进行格式设置！

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

<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>

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

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

<!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>