导航链接在彼此之上

时间:2017-09-21 22:32:46

标签: html css

好的,所以我正在构建一个导航系统,我遇到了一个问题,他们互相卡在了一起。



$data = "[[[12500,1]],[[12500,2]],[[12500,3]],[[12500,4]],[[12500,5]],[[111111,6],[22222,6]],[[6400,7]],[[6400,8]],[[6400,9]],[[6400,10]],[[6400,10]],[[6400,10]],[[6400,10]],[[6400,10]],[[6400,10]],[[5558,10]],[[5558,10]],[[5558,8],[4600,2]],[[4600,10]],[[4600,10]],[[4600,10]],[[4600,10]],[[4600,10]],[[4600,10]],[[4600,10]],[[4600,10]],[[4600,10]],[[4600,10]],[[4600,6],[4500,4]],[[4500,10]],[[4500,10]],[[4500,10]],[[4500,10]],[[4500,8]]]";
$decoded = json_decode($data);
$namedArray = fix_name($decoded);
$insertArray = arrange_array($namedArray);
echo "<pre>";
print_r($insertArray);
echo "</pre>";die;

// Fix the Name first
function fix_name($decoded)
{
$number = 1;
foreach ($decoded as $key=> $value) {
    $value['name'] = $number;
    $insertArray[] = $value;
    $number++;
}
return $insertArray;
}
function arrange_array($namedArray)
{
    $insertArray = [];
  foreach ($namedArray as $array) {
    if (count($array) > 2) {
        $name = $array['name'];
        unset($array['name']);
        foreach ($array as $key => $value) {
            $array[$key]['name'] = $name;
        }
        foreach ($array as $arr) {
            $insertArray[] = arrange($arr);
        }
    } else {
        $temp['DIMENSIONS '] = $array[0];
        $temp['NAME'] = $array['name'];
        $insertArray[] = $temp;
    }
    }
   return $insertArray;
}
 function arrange($array)
{
    $temp = [];
    $temp['DIMENSIONS'] = [$array[0], $array[1]];
    $temp['NAME'] = $array['name'];
    return $temp;
}
&#13;
body{
			margin:0px;
	border:0px;
}

.nav-wrapper{
background-color: #34384a;
width: 100%;
height: 70px;
overflow: hidden;
margin: 0;
}
.prime-nav{

}
.prime-nav a{
	padding: 24px 30px;
	
	display: inline-block;
	border-right: 1px solid #34495E;
	border-left: 1px solid #34495E;
	overflow: hidden;
	position: fixed;
	left: 500px;

}
.prime-nav a:hover{
	background-color: #2e3242;
}
a{
	text-decoration: none;
	color: white;
	font-size: 20px;
}
&#13;
&#13;
&#13;

我希望导航项目能够粘在中间,所以如何在不将其从中间移除的情况下解决这个问题。

2 个答案:

答案 0 :(得分:1)

感谢大家的帮助,我通过添加text-align:center;

解决了我自己的问题

答案 1 :(得分:0)

float: left;我相信你正在寻找的是什么。

body{
  margin:0px;
  border:0px;
}

.nav-wrapper{
  background-color: #34384a;
  width: 100%;
  height: 70px;
  overflow: hidden;
  margin: 0;
}

.prime-nav{
  left: 500px;
}

.prime-nav a{
  padding: 24px 30px;
  margin: 5px;
  display: inline-block;
  border-right: 1px solid #34495E;
  border-left: 1px solid #34495E;
  overflow: hidden;
  float: left;
  left: 500px;
}

.prime-nav a:hover{
  background-color: #2e3242;
}

a{
  text-decoration: none;
  color: white;
  font-size: 20px;
}
<div class="nav-wrapper">
    <div class="prime-nav">
       <a>Build Computer</a>
       <a>Other Bots</a>
    </div>
</div>