0

次のことを達成するにはどうすればよいですか (画像を参照)。リスト要素を中央に配置したいので、これまでのところ、試みたものはロゴ (または H1) と同じ行に配置されています。

リにマージントップを適用しようとしましたが、まったく機能しませんでした。誰かが私が間違っている場所を教えてくれれば幸いです。

ありがとう

ここに画像の説明を入力

私の試み：

<html>
<header>
    <link rel="stylesheet" type="text/css" href="style2.css"></header>
<body>
    <div>
        <h1 class="logo">LogoHere</h1>

        <ul class="nav-menu">
            <li><a href="index.html">Action</a></li>
            <li><a href="about.html">Who we are</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Get in touch</a></li>
        </ul>
    </div>
</body>

CSS:

.logo {
    display: inline-block;
    position: relative;
    font-family: times, Times New Roman, times-roman, georgia, serif;
    font-size: 54px;
    line-height: 40px;
    letter-spacing: -5px;
    color: #444444;
    margin: 0 0 0 0;
    padding-top: 25px;
    padding-left: 25px;
    font-weight: 100;
}

.nav-menu {
    display: inline-block;
    list-style-type: none;
    font-size: 20px;
    padding: 0px;
    margin-top: 0px;
    padding-left: 50px;
    width: 55%;
    margin-left: 10px;
}

.nav-menu li {
    display: inline;
    margin: 0px 20px 20px 0px;
}

.nav-menu li a {
    text-decoration: none;
    color: grey;
}

li a:hover {color: #444444;}  /* mouse over link */

li a:active {
    color:white;
    text-decoration: underline;
}  /* selected link */
4

2 に答える 2

0

コツは、CSSline-heightプロパティを効果的に使用することです。これは、これを達成する方法を示すフィドルです。

HTML

<select multiple>
  <option>One</option>
  <option>Two</option>
</select>

CSS

header {
  line-height: 100px;
}
header span {
  padding: 0 0 0 20px;
}
.logo {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
}
于 2013-09-07T18:02:57.257 に答える