Question

在#nav ul li中，我似乎无法修改文本的位置而不改变块的大小。每当我尝试使用填充时，块的大小都会改变。如何在不改变块大小的情况下移动文本？这是代码。

<!DOCTYPE html>
<html>
<head>
<style>

body
{
    padding: 0;
    background-color: #FFC0CB;
}
#container
{
    margin: 0 auto;
    width:100%;
    height: 1500px;
    padding: 0px;
}

#header
{
    overflow: auto;
    background-color: red;  
    margin: 0px;

}


#headTable
{
    float:right;
}

#logo
{
    background-color: green;
    margin: 5px 0px 5px 70px;
    float: left;
    width:150px;
    height:100px;
}

#headTable ul
{
    list-style-type: none;
    margin: 0;
}

#headTable ul li
{
    font-size: 35px;
    padding-top: 20px;
    color: black;
    float: left;
    margin: 20px 50px;
}

#headTable ul li:hover
{
    background-color: blue;
    color:red;
}

#nav
{
    clear: both;
    width:100%;
    height: 95px;
    background-color: purple;

}

#nav ul
{
    overflow: auto;/*
    background-color: yellow;*/
    margin: 0px;
    padding: 0px;
}

#nav ul li
{

    background-color: black;
    color:white;
    font-size: 30px;
    list-style-type: none;
    text-decoration: underline;
    margin: 20px;
    padding: 10px 10px 10px 20px;
    float: left;
    /*text-indent: 0px;
*/}

#page
{
    float: left;
    margin: 10px;
    height:700px;
    width:700px;
    background-color: #FFC0CB;

}

#page p
{
    padding:100px 0px 0px 50px;
    font-size: 20px;
    color: navy; 

}


#content
{
    height: 1000px;
    width: 1334px;
    position: absolute;
    margin:0px; 
    background-color: #00B2EE;

}
#top
{
    float: right;
    position: relative;
    margin: 10px;
    background-color: #7A67EE;
    width:500px;
    height:300px;
}

#low
{ 
    position: relative;
    clear: both;
    float: right;
    margin:-300px 10px 10px 10px;
    background-color: #7A67EE;
    width:500px;
    height:300px;

}

</style>
</head>

<body>

<div id="container">
    <div id="header">
        <div id="logo"> 
            <img src="plane.jpg" width="150" height="100">
        </div>
        <div id="headTable">
            <ul>
                <li>Google</li>
                <li>Google</li>
                <li>Google</li>
            </ul>   
         </div>
    </div>

        <div id="nav">
            <ul>
                <li>Menu</li>
                <li>Blog</li>
                <li>Ins</li>
                <li>BBC</li>
                <li>Contact</li>
                <li>Wow</li>
                <li>Doge</li>
                <li>Such fun</li>
            </ul>       
        </div>

    <div id="content">   

        <div id="page">
            <p>This is a paragraph that should
            stay intact inside the id of Page.
            </p>    
        </div>

        <div id="top">
            <p>THis is a paragraph that should
            stay intact inside the id of top.
            </p>
        </div>

        <div id="low">
            <p>This is a paragraph that should
            stay intact inside the id of bottom.
            </p>    
        </div>

    </div>
</div>              

</body>
</html>

Answer 1

您需要设置li元素的宽度，并将导航文本包装在span标记中。然后你可以向左或向右移动它们，导航li的宽度不会改变。

 <li><span>Menu</span></li>
 <li><span>Blog</span></li>
 <li><span>Ins</span></li>
 <li><span>BBC</span></li>
 <li><span>Contact</span></li>
 <li><span>Wow</span></li>
 <li><span>Doge</span></li>
 <li><span>Such fun</span></li>

#nav ul li{width:70px;background-color: black;color:white;font-size: 30px;list-style-type: none;text-decoration: underline;margin: 20px;padding: 10px 10px 10px 20px;float: left;}
#nav ul li span{margin-left:70px;}

请在此处查看有效的解决方案：http://jsfiddle.net/mtruty/73uav/

如何在#nav中移动li中的文本而不是改变li块的大小

1 个答案: