Question

我希望在navbar下方显示一些内容。现在我的内容和我的导航栏放在一起。我不确定添加/更改哪个CSS属性来解决此问题。我相信我应该使用display: block;。但是我不确定在哪里放置它

这是一个例子的jsfiddle：

https://jsfiddle.net/liondancer/69z2wepo/39146/

这是JSX：

var Logo = React.createClass({
render: function() {
    return (
    <a href="/"> Here </a>
  );
}
})

var NavBar = React.createClass({
  render: function() {
    return (
      <div className="navigation">
                <div className="container">
                    <Logo/>
                    <div className="site-navigation">
                        <ul>
                            <li>
                                <a href="/gallery">Gallery</a>
                            </li>
                            <li>
                                <a href="/news">News</a>
                            </li>
                            <li>
                                <a href="/contact">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
    );
  }
});

var Content = React.createClass({
  render: function() {
    return (
        <div className="content-container">
                This is home.
            </div>
    );
  }
})

var Layout = React.createClass({
    render: function() {
    return (
       <div>
         <NavBar/>
         <Content/>
       </div>
    );
  }
})

ReactDOM.render(
  <Layout/>,
  document.getElementById('container')
);

这是CSS：

.navigation {
    position: absolute;
    width: 100%;
}

.container {
  position: relative;
  width: auto;
  padding: 0 50px;
  margin: 10px auto 0px auto;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  margin: 0;
  height: 45px;
}

.site-navigation {
  float: right;

 }

.site-navigation ul li{
   display: inline;
 }

.site-navigation ul li a {
   text-decoration: none;
   padding: 25px;
 }

.site-navigation ul li a:hover {
   padding-bottom: 10px;
   color: #FFFFFF;
   transition: all 0.25s ease-in-out 0s;
}

Answer 1

删除.navigation上的<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> <soap:Header> <context xmlns="urn:zimbra"> <change token="4"/> </context> </soap:Header> <soap:Body> <CreateAppointmentResponse calItemId="259" rev="4" ms="4" invId="259-258" apptId="259" xmlns="urn:zimbraMail"/> </soap:Body> </soap:Envelope>，您将获得所需的输出。

Fiddle

divs出现在另一个CSS下面

1 个答案: