Question

我正在尝试对齐导航菜单但无法使其正常工作。我想要的是 - 在左侧我想要一个小徽标，它也是链接到起始页面的链接。在网站的中间，我想要其他“文本链接”。 Like this

这是代码以及它当下的样子。 https://jsfiddle.net/oliha089/wh1zwg4x/ 徽标不在左侧，文本不在网站中间。

HTML

    <header>
        <div class = "menu" >
            <ul>
                <li> <a  id = "logobut" href = "start-page.html">
                    <!-- försök flytta loggan till vänster kanten -->
                    <img id = "logoalign" src = "logga8svart.jpg" /> </a> </li>

                <li> <a id = "portf" href = "portfolio-page.html"> PORTFOLIO </a> </li> 
                <li> <a  id = "about" href = "aboutme-page.html"> ABOUT </a> </li> 
                <li> <a id = "contact" href = "contactme-page.html"> CONTACT </a> </li> 
            </ul>
        </div>
    </header>

CSS

/* menu CSS-code */

.menu ul{
list-style: none;
z-index: 999;
background-color: white;/*#444;*/
text-align: center;
padding: 0;
margin: 0;
position: fixed;
width: 100%;
opacity: 0.7;
height: 50px;   
}

.menu a:hover {
text-decoration: underline;
opacity: 1;
}

.menu a.active {
background-color: #fff;
color: #444;
cursor: default;
}

.menu a {
opacity: 0.7;
text-decoration: none;
font-weight: bold;
color: black; /*#fff;*/
display: block;
transition: background-color;
margin-left: 20px;
margin-right: 20px;
}

#logobut {
margin-right: 100px;
}
.menu li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
display: inline-block; 
}   
@media screen and (min-width: 600px) {
.menu li {
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.2em;
}

#logoalign {
height: 40px; 
vertical-align: middle;
}

感谢。

Answer 1

你去了
CSS

/* menu CSS-code */

.menu ul{
list-style: none;
z-index: 999;
background-color: white;/*#444;*/
text-align: center;
padding: 0;
margin: 0;
position: fixed;
width: 100%;
opacity: 0.7;
height: 50px;   
}

.menu a:hover {
text-decoration: underline;
opacity: 1;
}

.menu a.active {
background-color: #fff;
color: #444;
cursor: default;
}

.menu a {
opacity: 0.7;
text-decoration: none;
font-weight: bold;
color: black; /*#fff;*/
display: block;
transition: background-color;
margin-left: 20px;
margin-right: 20px;
}

#logobut {
margin-right: 100px;
}
.menu li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
display: inline-block; 
}   
@media screen and (min-width: 600px) {
.menu li {
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.2em;
}

#logoalign {
height: 40px; 
vertical-align: middle;

}

.logoleft{
float:left;
}

HTML

<header>

        <div class = "menu" >
            <ul>
                <li class="logoleft"> <a  id = "logobut" href = "start-page.html">
                    <!-- försök flytta loggan till vänster kanten -->
                    <img id = "logoalign" src = "logga8svart.jpg" /> </a> </li>

                <li> <a id = "portf" href = "portfolio-page.html"> PORTFOLIO </a> </li> 
                <li> <a  id = "about" href = "aboutme-page.html"> ABOUT </a> </li> 
                <li> <a id = "contact" href = "contactme-page.html"> CONTACT </a> </li> 
            </ul>
        </div>
    </header>

Answer 2

以下是flex框并没有列表的示例：

＆＃13;

nav {
  display: flex;
  width: 100%;
  background-color: grey;
  padding-left: 10px;
  justify-content: space-between;
}

.navPoints {
  display: flex;
  padding-left: 5px;
}

span {
  padding: 10px;
  font-family: Arial;
}

span:hover {
  cursor: pointer;
  color: white;
}

＆＃13;

<nav>
  <img src="https://www.google.ch/search?q=logo&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjp4vKH9qnNAhXD0RQKHZMHCaMQ_AUICCgB&biw=1600&bih=1085#imgrc=as8oG3SG3wToVM%3A">
  
  <div class="navPoints">
    <span>PORTFOLIO</span>
    <span>ABOUT</span>
    <span>CONTACT</span>
  </div>
  <div></div>
</nav>

＆＃13;

使用柔性盒，你可以像浮动一样放置一些东西，但它更容易，你有不同的方法将它放在你想要的地方。请查看本指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

所以这很容易。我拿了一个随机的标志作为例子。

编辑：在跨栏的情况下添加链接，这对您来说应该是个问题：）

干杯。

Answer 3

添加此内容，

.menu{
width:100%;
}
.menu ul{
background-color: white;/*#444;*/
text-align: center;
padding-left: 0;
margin: 0;
width: 100%;
opacity: 0.7;
height: 50px;
float:left; 
}
.menu ul li{
 list-style-type:none;
 display:inline-block;
 padding-left: 20px;
 padding-right: 20px;
 float:left;    
}
.menu a:hover {
text-decoration: underline;
opacity: 1;
}
.menu a.active {
background-color: #111;
color: #444;
cursor:pointer;
}
.menu a {
opacity: 0.7;
text-decoration: none;
font-weight: bold;
color: black; /*#fff;*/
transition: background-color;
}
#logobut {
padding-right: 20px;
}

将导航栏与徽标对齐

3 个答案: