Question

这是我第一次在stackOverflow上提交问题，希望你们能够提供帮助。我正在尝试创建一个电话友好的网站。我正在设置它，以便下方选项卡中的背景图像/文本可以超链接到单独的页面。我已经知道img和文本链接有效，但是当我尝试添加附加到屏幕右侧的附加文本时，＆gt;'没有正确对齐。它们都相互抵消。

<!DOCTYPE html>
<html>
<head>
    <title>Mobile</title>
</head>

<style type="text/css">
        body {
                background-color:DodgerBlue;
                margin: auto;
                color:white;
        }

/*-----------------------------------------------------------------------*/
        /*Sets top*/
        h1 {
                text-align:center;
                font-size:800%;
                color:white;
                text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
        }       

/*-----------------------------------------------------------------------*/        
        /*Sets up Home / Sign Up*/
        #nav {  /*sets up "Home / Sign Up" div to be centered, no bullets*/
            list-style-type: none;
            margin: auto;
            font-weight:bold;
        }
        #nav ul li {
            margin: 0;
            padding: 0;
            display: inline; /*Sets each <li> to stick next to each other*/
            text-align: center; /*Centers text horizontaly*/
            padding-right: 50px; /*Space between Home and Sign Up*/
            font-size:600%;/*Font size*/
            background-color: grey;
    }
        #nav ul li a {
            color: white; /*Hyperlink font to white*/
            text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /*Uses 2 shadows to create black border around text*/
            text-decoration:none; /*no underlines*/
        }

/*-----------------------------------------------------------------------*/        
        /*Set up bottom lines*/
        #nav2 ul { /*Removes bullet points and removes space on left*/
            margin: 0;
            padding: 0;
            list-style-type: none;
    }
        #nav2 ul li {
            background-image: url('Gradiant.png');
            background-size:contain;
            color:white;
            font-size:600%;
    }
        #nav2 ul li a {
            display:block;
            width:1000px;
            height:100px;
            color: black;
            text-decoration:none;
            background-repeat:repeat-x;
        }
    </style>

<body>
    <!-- Logo at Top-->
    <h1><center>Title</center></h1>
    <hr>

    <!-- Directori Tags -->
    <center>
        <div id="nav">
        <ul>
            <li><a href="Home.php" class="topNav">Home</a></li>
            <li><a href="#" class="topNav">Sign Up</a></li>
        </ul>
        </div>
    </center>
    <hr>

    <!-- Bottom Tags -->
    <div id="nav2">
        <ul>
            <li><a href="#" class="botNav">Unlock<div style="float: right;">> </div></a></li>
            <li><a href="#" class="botNav">Lock<div style="float: right;">> </div></a></li>
            <li><a href="#" class="botNav">Log<div style="float: right;">> </div></a></li>
            <li><a href="#" class="botNav">Time<div style="float: right;">> </div></a></li>
        </ul>
    </div>
</body></html>

Answer 1

感谢您提出问题，欢迎来到stackoverflow。

你必须添加style =“clear：both;”添加类botNav的锚元素。

您可以在此处获取更多信息： float:right not floating all the way to the right

它会正常工作。

希望我能帮到你

在<li> </li>中拆分文字

1 个答案: