如何将列表项置于水平无序列表中？

时间：2017-07-09 02:42:49

标签： html css html5 css3

html / css newbie here。

我已经完成了一些关于html / css的课程，现在我正在通过尝试复制一些我喜欢的网站来测试我的知识。现在我正在努力制作可汗学院的头版（https://www.khanacademy.org），但我一直在努力做点什么。

我有<ul>代表页面的顶部导航栏，现在我正试图将他们的徽标（导航栏内的<div id="ka">作为列表项）居中到页面但使用text-align: center和margin-left: auto; & margin-right: auto似乎无能为力。

这是我的代码：

body {
  margin: 0;
  padding: 0;
  background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
  background-repeat: no-repeat;
  background-size: 157.75%;
  background-position-x: 50.825%;
}

li {
  display: inline-block;
}

.navbar {
  overflow: hidden;
  width: 100%;
  height: 60px;
  border-bottom-color: #68e2de;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.navbar {
  list-style: none;
}

.navbar-text {
  color: white;
  float: left;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 17px;
  padding: 13px 38px 0px 4px;
  margin-left: -8px;
}

#ka {
  display: inline-block;
}

#ka-logo {
  float: left;
  width: 24px;
  margin-left: auto;
  margin-right: auto;
}

#search-icon {
  width: 32px;
  margin-left: -44px;
  margin-top: 8px;
}

#search-bar {
  background-color: #47dcd6;
  border-radius: 4px;
  margin-left: 8px;
  border: 1px solid #47dcd6;
  padding: 12px 175px 14px 12px;
}

#expand-triangle {
  font-size: 13px;
  margin-left: 7px;
  color: #85e8e3;
}

.bold-signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  font-size: 23px;
  color: white;
  font-weight: 600;
}

.signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  color: white;
  font-size: 23px;
}

#sign {
  float: right;
  margin-right: 44px;
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <ul class="navbar">
    <li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
    <li id="search-bar" class="navbar-text">Search</li>
    <li><img id="search-icon" src="search.png"></li>
    <li>
      <div id="ka">
        <img id="ka-logo" src="leaf-green.svg">
        <div class="bold-signika">KHAN</div>
        <div class="signika">ACADEMY</div>
      </div>
    </li>
    <li id="sign" class="navbar-text">New user / Sign up</li>
  </ul>
</body>

</html>

我似乎this question，但建议的内容对我不起作用。

我的问题是：如何将徽标div居中？

旁注：因为我对html很新，所以上面的代码可能会有很多不好的做法。关于如何更有效地完成我所做的事情的提示将受到高度赞赏。

1 个答案:

答案 0 :(得分：1)

这是解决问题的方法。

在CSS中， flex 非常有用，请看一下：

  

Flex指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我的CSS

我已将flexbox用于居中的真实div并设置正确的div。

对于徽标，我使用了first div，其中包含任务栏(non-clickable)的高度和宽度以及徽标居中second (clickable)的{​​{1}} position absolute

<强>享受

＆＃13;
＆＃13; 
body {
  margin: 0;
  padding: 0;
  background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
  background-repeat: no-repeat;
  background-size: 157.75%;
  background-position-x: 50.825%;
}

li {
  display: inline-block;
}

.navbar {
  overflow: hidden;
  width: 100%;
  height: 60px;
  border-bottom-color: #68e2de;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  
  display: flex;
  align-items:center;
  position:absolute;
}

.navbar {
  list-style: none;
}

.navbar-text {
  color: white;
  float: left;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 17px;
  /**padding: 0 38px 0px 4px;**/
}

.logo {
  position:absolute;
  height:100%;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
}

.logo-container {
  display:flex;
  align-items:center;
  pointer-events:all;
}

.logo-container .ka-logo {
  width: 24px;
}

.left, .right {
  display:flex;
  align-items:center;
}

.left {
  margin:0 10px;
}

.right {
  justify-content:right;
  margin:0 10px 0 auto;
}

#search-icon {
  width: 32px;
  margin-left: -44px;
  margin-top: 8px;
}

#search-bar {
  background-color: #47dcd6;
  border-radius: 4px;
  margin-left: 8px;
  border: 1px solid #47dcd6;
  padding: 12px 175px 14px 12px;
}

#expand-triangle {
  font-size: 13px;
  margin-left: 7px;
  color: #85e8e3;
}

.bold-signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  font-size: 23px;
  color: white;
  font-weight: 600;
}

.signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  color: white;
  font-size: 23px;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div class="navbar">
    <div class="left">
      <li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
      <li id="search-bar" class="navbar-text">Search</li>
      <li><img id="search-icon" src="search.png"></li>
    </div>
    <div class="logo">
      <div class="logo-container">
          <img class="ka-logo" src="leaf-green.svg">
          <div class="bold-signika">KHAN</div>
          <div class="signika">ACADEMY</div>
        </div>
    </div>
    <div class="right">
      <li class="navbar-text">New user / Sign up</li>
    </div>
  </div>


  <!--<ul class="navbar">
    <div class="left">
      <li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
      <li id="search-bar" class="navbar-text">Search</li>
      <li><img id="search-icon" src="search.png"></li>
    </div>
    <div class="center">
      <li>
        <div id="ka">
          <img id="ka-logo" src="leaf-green.svg">
          <div class="bold-signika">KHAN</div>
          <div class="signika">ACADEMY</div>
        </div>
      </li>
    </div>
    <div class="right">
      <li id="sign" class="navbar-text">New user / Sign up</li>
    </div>
  </ul>-->
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题