Question

我想在左上角的网站名称旁边“锚定”一个子标题。网站名称位于角落，子标题位于其右侧。在https://www.djangoproject.com/有一个例子，其中“完美主义者有最后期限的网络框架”这个短语就在网站名称“DJango”旁边。在我的代码中我设置了所有内容，但我无法弄清楚如何“锚定”名称旁边的项目。使用填充或边距来保持它们总是将其他项目推出格式，并且实际上并不将子标题保留在一个位置，它总是在调整窗口大小时尝试移动。

html代码......

/* Global Layout Set-up */
* { 
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Lato', sans-serif;
  color: #222;
  background: #54ffa0;
}
/* Link Styles */

/******************************************/

/*TOP PAGE

/******************************************/

a {
  text-decoration: none;
  color: #000;
}
a:hover {
  color: #000;
}

.main-nav {
  width: 100%;
  background: #000000;
  min-height: 30px;
  padding: 10px;
  position: fixed;
  text-align: center;
  min-width: 600px;
}

.nav {
  display: flex;
  justify-content: space-around;
  font-weight: 700;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

.nav .name {
  display: none;
  padding-top: 15px;
}

.nav li {
  padding: 5px 10px 10px 10px;
}

.nav a {  
  color: #fff;
  display: block;
    border: solid #fff; 5px;
    padding: 10px;
}

a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    color: #0efb7b;
    border-color: #0efb7b;
}

.nav a:hover {
  color: white
  border-color: #0efb7b;    
    color: #fff;
}

.nav {
    max-width: 1200px;
  }

  .nav .name {
    display: block;
    margin-right: auto;
    color: white;
  }

/******************************************/

/*BODY

/******************************************/

.direct a {
    color: #222;
}

ul.direct {
    padding: 0;
    text-align: center;
}

.direct li {
border: solid #222; 5px;
    display: inline-block;
    background: #fff;
    color: #222;
    padding: 5px 10px;
    margin: 2px;
}

.subname {
    padding-right: 1000px;
    color: #fff;
    display: block;
}

 .nav .subname {
    position: left;
    margin-right: auto;
    padding-top: 20px;    
    font-size: 0.75em;
    text-align: left;
    max-width: 225px;
    min-width: 200px;
  }

css代码......

{{1}}

Answer 1

CSS定位是你最好的朋友。

position:static是默认设置，在页面调整大小时使事情流动
position:relative基本上是相同的东西，但你可以将某些东西相对移动到原来的位置。
position:fixed修复了屏幕上某个位置的元素，当您在页面上滚动时元素保持在同一位置。就像Facebook标题一样，它始终位于屏幕的顶部。
position:absolute使元素相对于其第一个定位（非静态）父元素位于一个点中。这是我们将使用的那个。
属性top，right，bottom和left来说明元素的位置

你可以做的是让main-nav定位（只做position:relative，它会表现得像静态，但告诉它里面的所有绝对物，它的位置），然后它内部的所有位置：绝对。例如：

HTML：

<nav class="main-nav"> <!-- nav is just a div, but tells search engines that it's a navigation menu -->
<ul class="nav">
        <li class="name">Test Site</li>
        <li class="subname">sub-heading should be right next to 'Test Site' whenever page is resized</li>
        <li class="signup"><a href="#">Sign up</a></li>
        <li class="login"><a href="#">Log in</a></li>
    </ul>
</nav>

CSS：

nav {
    position:relative;
}
.name {
    width:50px; /* whatever the width you want */
    position:absolute;
    top:0;
    left:0;
}
.subname {
    position:absolute;
    top:0;
    left:50px; /* whatever the width of name was */
}
.signup {
    position:absolute;
    top:0;
    right:60px; /* whatever the width of login is */
}
.login {
    width:60px; /* whatever the width you want */
    position:absolute;
    top:0;
    right:0;
}

这使得所有元素在nav中都具有完全相同的空间，无论如何。 position:absolute的缺点是，如果你使屏幕足够小，左边的元素将与右边的元素重叠，因为绝对定位的元素不会对包括碰撞在内的任何事物提供废话。

Answer 2

而不是将填充和边距与：

组合在一起

<body>
<div class="main-nav">
<ul class="nav">
<li class="name">Test Site</li>
<li class="subname">sub-heading should be right next to 'Test Site' whenever page is resized</li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Log in</a></li>
</ul>
</div>

我很想得到像这两个<div>s：

这样的东西

<div class="sitename">Test Site</div>
<div class="strapline">sub-heading should be right next to 'Test Site' whenever page is resized</div>

在所有父容器之外（除了<body>）。

然后，您可以将.sitename和.strapline设置为：

.sitename, .strapline {
position: absolute;
top: 36px;
}

.sitename {
left: 6px;
width: 120px;
}

.strapline {
left: 126px;
width: 180px;
}

如何在左上角的网站名称旁边“锚定”列表元素？

2 个答案: