Question

我当前的代码

body {
  margin: 0;
}

h1 {
  font-family: 'Itim', cursive;
}

header {
  background-color: black;
  color: white;
  height: 50px;
  padding: 8px 0px 10px 40px;
}

header li {
  display: inline;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-weight: 400;
  font-size: 21px;
  float: left;
  margin-top: 0px;
  margin-right: 0px;
}

nav ul {
  display: inline;
  padding: 0px;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
}

<header>
  <nav>
    <h1> COMPANY NAME </h1>
    <ul>
      <li> <a href="#"> HOME </a> </li>
      <li> <a href="#"> ABOUT </a> </li>
      <li> <a href="#"> OUR TEAM </a> </li>
      <li> <a href="#"> WORK </a> </li>
      <li> <a href="#"> CONTACT US </a> </li>
    </ul>
  </nav>
</header>

现在，问题是我的列表项超出了标题部分。我在标签下单独显示，但我想在标题部分的右侧显示它。

Answer 1

body {
margin: 0;
}

h1 {
font-family: 'Itim', cursive;
}

header {
background-color:black;
color:white;
}
header li {
display: inline;
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: 400;
font-size: 18px;
float: left;
margin-top: 0px;
margin-right:0px;

}
nav {
  display: inline-flex;
}
nav ul {
float: right;
}
nav ul li {
display:inline-block;
list-style-type: none;
}

<!Doctype html>
<html>
<head> <title> How cool! </title>
     <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header> 
    <nav>
        <h5> COMPANY NAME </h5>
      <ul>
        <li> <a href = "#" > HOME </a> </li>
        <li> <a href = "#" > ABOUT </a> </li>
        <li> <a href = "#" > OUR TEAM </a> </li>
        <li> <a href = "#" > WORK </a> </li>
        <li> <a href = "#" > CONTACT US </a> </li>
      </ul>
    </nav>
</header>
</body>

Answer 2

由于您在li上使用了height，因此需要add a clearfix。

另外，从标题中删除已修复的body { margin: 0; } h1 { font-family: 'Itim', cursive; } header { background-color: black; color: white; /* remove this height: 50px;*/ padding: 8px 0px 10px 40px; } header li { display: inline-block; list-style-type: none; font-family: 'Ubuntu Condensed', sans-serif; font-weight: 400; font-size: 21px; float: left; margin-top: 0px; margin-right: 0px; } nav ul { padding: 0; } nav:after { content: ''; display: table; clear: both; }。

<header>
  <nav>
    <h1> COMPANY NAME </h1>
    <ul>
      <li> <a href="#"> HOME </a> </li>
      <li> <a href="#"> ABOUT </a> </li>
      <li> <a href="#"> OUR TEAM </a> </li>
      <li> <a href="#"> WORK </a> </li>
      <li> <a href="#"> CONTACT US </a> </li>
    </ul>
  </nav>
</header>

deleteItem(index) {
    //index is the Event Object here
    let todoItems = this.state.todos;
    todoItems.splice(index, 1); 

    this.setState({
      todos: todoItems
    });
    this.setLocalStorage();
  }

<span onClick={this.deleteItem} className="delet-todo">&#10005;</span>
//Here React pass the event object as parameter to deleteItem

Answer 3

我所做的只是解决了一些问题。如果这是您正在寻找的结果，请告诉我。

干杯。

＆＃13;

body {
  margin: 0;
}

h1 {
  float:left;
  font-family: 'Itim', cursive;
  display:inline-block;
  padding:5px;
}

header {
  color: white;
  background-color: black;
  padding:20px 40px;
  overflow:hidden;
}

header li {
  display: inline-block;
  padding:10px;
  list-style-type: none;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-weight: 400;
  font-size: 21px;
  float: left;
  margin-top: 0px;
  margin-right: 0px;
}

header li a{
  text-decoration:none;
  color:white;
}

header ul {
  float:left;
  padding: 0px;
}

＆＃13;

<header>
  <nav>
    <h1> COMPANY NAME </h1>
    <ul>
      <li> <a href="#"> HOME </a> </li>
      <li> <a href="#"> ABOUT </a> </li>
      <li> <a href="#"> OUR TEAM </a> </li>
      <li> <a href="#"> WORK </a> </li>
      <li> <a href="#"> CONTACT US </a> </li>
    </ul>
  </nav>
</header>

＆＃13;

如何将列表项部分插入标题部分？

3 个答案: