Question

我一直在努力为我正在制作的游戏制作自己的网站。我一直试图将链接全部放在一个div类中，另一个div放在它旁边，水平显示每个选项卡的一些信息。但是为了将文本放在一条水平线上，我不得不使用span类，这导致了一个链接中心的一些问题。任何想法是如何正确地将这个链接集中在一起？

链接到网站：https://mywebsite-rowanharley.c9users.io/main.php

代码：

<!DOCTYPE html>
<html>
<head>
    <title>My Site - Home</title>
    <!--<link rel="stylesheet" type="text/css" src="main.css">-->
    <style type="text/css">
        #sidebarlink{
            display: block;
            color: white;
            width: 200px;
            line-height: 50px;
            font-size: 20px;
        }
        #sidebarlink/*.sidebarlink*/:link {
            width:200px;
            background-color: black;
            color:white;
            text-decoration:none;
        }
        #sidebarlink/*.sidebarlink*/:visited{
            width:200px;
            background-color: black;
            color:white;
        }
        #sidebarlink/*.sidebarlink*/:hover{
            width:200px;
            background-color: #454545;
            color: white;
            text-decoration: none;
        }
        #sidebarlink/*.sidebarlink*/:active{
            width:200px;
            background-color: black;
            color: white;
            text-decoration: none;
        }
        #sidebar{
            width: 200px;
            height: 100%;
            background-color: black;
        }
        #playerFriendsDiv{
            /*display: inline;*/
            float: left;
            position: relative;
            left: 200px;
        }
        #showYourInfoDiv{
            /*display: inline;*/
            float: left;
            position: relative;
            left: 200px;
        }
        #logoutDiv{
            /*display: inline-block;*/
            float: left;
            position: relative;
            left: 200px;
        }
        html{
            height: 100%;
        }
        body{
            margin: 0px;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="showYourInfoDiv">
        test1
    </div>
    <div id="playerFriendsDiv">
        test2
    </div>
    <div id="logoutDiv">
        test3
    </div>
    <div id="sidebar" style="text-align: center">
        <div id="sidebarlinkdiv">
            <a onclick="showyourinfo()" id="sidebarlink">Player info</a>
        </div>
        <div id="sidebarlinkdiv">
            <a onclick="showfriends()" id="sidebarlink">Friends</a>
        </div>
        <div id="sidebarlinkdiv">
            <a onclick="showlogout()" id="sidebarlink">Logout</a>
        </div>

    </div>

    <script type="text/javascript">
        document.getElementById("showYourInfoDiv").style.display = "block";
        document.getElementById("playerFriendsDiv").style.display = "none";
        document.getElementById("logoutDiv").style.display = "none";
        function showyourinfo(){
            document.getElementById("showYourInfoDiv").style.display = "block";
            document.getElementById("playerFriendsDiv").style.display = "none";
            document.getElementById("logoutDiv").style.display = "none";
        }
        function showfriends(){
            document.getElementById("showYourInfoDiv").style.display = "none";
            document.getElementById("playerFriendsDiv").style.display = "block";
            document.getElementById("logoutDiv").style.display = "none";
        }
        function showlogout(){
            document.getElementById("showYourInfoDiv").style.display = "none";
            document.getElementById("playerFriendsDiv").style.display = "none";
            document.getElementById("logoutDiv").style.display = "block";
        }
    </script>

</body>

</html>

我还尝试围绕中心标签中的链接

Answer 1

您可以使用margin为元素设置保证金。

Answer 2

试试这个

<强> CSS

#showYourInfoDiv {
    display: inline-block;
    left: 200px;
    position: relative;
}

#sidebar {
    background-color: black;
    display: inline-block;
    float: left;
    height: 100%;
    width: 200px;
}

#sidebarlink {
    color: white;
    display: block;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    width: 100%;
}

修改

您应该执行以下操作 https://jsfiddle.net/2Lzo9vfc/73/

<强> HTML

<div id="sidebar"> <div class="sidebarlinkdiv"> <a onclick="showyourinfo()" class="sidebarlink">Player info</a> </div> <div class="sidebarlinkdiv"> <a onclick="showfriends()" class="sidebarlink">Friends</a> </div> <div class="sidebarlinkdiv"> <a onclick="showlogout()" class="sidebarlink">Logout</a> </div> </div> <div id="main-content"> <div id="showYourInfoDiv"> test1 </div> <div id="playerFriendsDiv"> test2 </div> <div id="logoutDiv"> test3 </div> </div>

<强> CSS

.sidebarlink{ color: white; display: block; font-size: 20px; line-height: 50px; text-align: center; width: 100%; } .sidebarlink/*.sidebarlink*/:link { width:200px; background-color: black; color:white; text-decoration:none; } .sidebarlink/*.sidebarlink*/:visited{ width:200px; background-color: black; color:white; } .sidebarlink/*.sidebarlink*/:hover{ width:200px; background-color: #454545; color: white; text-decoration: none; } .sidebarlink/*.sidebarlink*/:active{ width:200px; background-color: black; color: white; text-decoration: none; } #main-content { display: inline-block; } #sidebar{ background-color: black; display: inline-block; float: left; height: 100%; width: 200px; } html{ height: 100%; } body{ margin: 0px; height: 100%; }

Answer 3

如果你想集中玩家信息＆＃34;链接，只需将position: absolute添加到#sidebar div样式。

另外，将id="sidebarlink"更改为class="sidebarlink"，将#sidebarlink更改为.sidebarlink，因为只能有一个具有给定ID的元素，该元素应该是唯一的。

演示：

https://jsfiddle.net/90Lgck79/1/

html span类导致链接错误地居中

3 个答案: