Question

我目前正在做我的第一个网站，为了娱乐，我决定建立一个我真正喜欢的乐队的粉丝网站，以开始。这是我当前的网站，但显示“商店”的元素与右侧的间距太大。我能找到的唯一方法是使用“ margin'-number'”，但这会影响网页并增加其宽度。谁能帮我吗？

body {
    margin: 0;
    background: url(images/moonspell_concert_2.jpg) no-repeat;
    background-size: cover;
    color: #fff;
}

header {
    background-color: #000;
}

header::after {
    content:'';
    display: table;
    clear: both;
}

.logo {
    
}

nav {
    float: right;
    font-size: 1.45rem;
    font-family: "Roboto",sans-serif;
}

nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

nav ul li {
    float: left;
    width: 100px;
    height: 40px;
    background-color: #000;
    line-height: 40px;
    text-align: left;
    text-transform: uppercase;
    font-weight: 700;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    display: block;
    font-size: 0.85rem;
}

nav ul li a:hover {
    color: darkgoldenrod;
    -webkit-transition: 300ms ease;
    transition: 300ms ease;
}

nav ul li ul li {
    display: none;
    width: 140px;
    padding: 0 7px;
    text-transform: none;
    font-weight: 400;
}

nav ul li ul li a:hover {
    color: #fff;
}

nav ul li:hover ul li {
    display: block;
}

nav ul li ul li:hover {
    background-color: darkgoldenrod;
    color: #fff;
}

#news {
    margin-right: -46px;
}

#band {
    margin-right: -50px;
}

#tour {
    margin-right: -50px;
}

#media {
    margin-right: -43px;
}

#discography {
    margin-right: 10px;
}

#store {
    
}

.default-cursor /* Cursor fica default nos elementos que não são páginas */ {
    cursor: default;
}

<!DOCTYPE html>

<html>
    
    
    
<head>
    <link href="style.css" type="text/css" rel="stylesheet">  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moonspell - Fan Website</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
    
    
<body>
    <header>
        <div class="container" alt="logo" class="logo">
            
            <img src="images/moonspell_logo.png"/>
            
            <nav>
                <ul>
                    <li id="news"><a href="/news/news.HTML">News</a></li>
                    <li id="band"><a href="#band-menu" class="default-cursor">Band</a>
                        <ul>
                            <li><a href="/band/profiles.HTML">Profiles</a></li>
                            <li><a href="/band/history.HTML">History</a></li>
                        </ul>
                    </li>
                    <li id="tour"><a href="#tour-menu" class="default-cursor">Tour</a>
                        <ul>
                            <li><a href="/tour/tour_dates.HTML">Tour Dates</a></li>
                            <li><a href="/tour/tour_past.HTML">Tour Archive</a></li>
                        </ul>
                    </li>
                    <li id="media"><a href="#media-menu" class="default-cursor">Media</a>
                        <ul>
                            <li><a href="/media/photos_albums.HTML">Photos</a></li>
                            <li><a href="/media/videos.HTML">Videos</a></li>
                        </ul>
                    </li>
                    <li id="discography"><a href="#media-menu" class="default-cursor">Discography</a>
                        <ul>
                            <li><a href="/discography/releases.HTML">Releases</a></li>
                            <li><a href="/discography/videography.HTML">Videography</a></li>
                        </ul>
                    </li>
                    <li id="store"><a href="https://www.moonspell.rastilho.com/" target="_blank">Store</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>
    
    
</html>

Answer 1

您已在width: 100px上设置了nav ul li，这就是确定store元素右侧有多少空间的原因。

如果您对以这种方式将宽度用于布局感到满意，则可以像这样简单地减小store元素的宽度：

#store {
  width: 60px;
}

如何在不影响网页的情况下将文本向左移动？

1 个答案: