Question

我正在模板Webiste中构建菜单。

我应该怎么做才能使菜单位于同一水平线上？

我想要的是

LOGO 01xxxx 02xxxxx 03xxxxx 04xxxx

不是

LOGO

01xxxx 02xxxx 03xxxx 04xxxx ....

我的网站显示在localhost 3000中：

我的header.js

   import React from 'react';
   import image from './images/0.png'
   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
   import { faHome } from '@fortawesome/free-solid-svg-icons'
   import './Header.css'

   const Header = () =>{
      return(
        <div>
         <nav>
            <div>
               <div>

                <div>
                        <a href="#home">
                        <img src={image} alt="logo"/>
                    </a>
                </div>

                <div className="container">
                    <div>
                        <ul>
                            <li><a  href="#01文字文字">01文字文字</a></li>
                            <li><a  href="#02文字文字">02文字文字</a></li>
                            <li><a  href="#03文字文字">03文字文字</a></li>
                            <li><a  href="#04文字文字">04文字文字</a></li>
                            <li><a  href="#Test文字文字">Test文字文字</a></li>
                            <li><a  href="#回首頁"><FontAwesomeIcon icon={faHome} />回首頁</a></li>
                         </ul>
                    </div>
                </div>

            </div>
        </div>
    </nav>
    </div>
);
}

export default Header

我的Header.css：

ul {
padding-left: 0;
list-style-type: none;
}
li {
 float: left;
 padding-left: 10px;
}
  li:first-child {
 padding-left: 0;
}

我的app.js：

 import React, { Component } from 'react';
 import Center from './Components/Center';
 import Header from './Components/Header';

 class App extends Component {
   render() {
return (
  <div>
      <Header/>
      <Center/>
  </div>
   );
 }
}

export default App;

Answer 1

您需要将display内联到li标签。

.container li{
   display: inline;
   width: 200px;
   height: 50px;
   border: 2px #ccc solid;
   margin-right: 10px;
   margin-bottom: 10px;
   list-style: none;
  }

Answer 2

我会去

ul {
    padding-left: 0;
    list-style-type: none;
}
li {
    float: left;
    padding-left: 10px;
}
li:first-child {
    padding-left: 0;
}

由于它将是水平的，因此您将摆脱每个列表项左侧的点，并且默认情况下每个无序列表都不会填充空白。

Answer 3

请以此替换您的代码

   <nav>
          <div class="flex-container">
            <div>
              <a href="#home">
                <img src={image} alt="logo" />
              </a>
            </div>

            <div className="container">
              <div>
                <ul>
                  <li>
                    <a href="#01文字文字">01文字文字</a>
                  </li>
                  <li>
                    <a href="#02文字文字">02文字文字</a>
                  </li>
                  <li>
                    <a href="#03文字文字">03文字文字</a>
                  </li>
                  <li>
                    <a href="#04文字文字">04文字文字</a>
                  </li>
                  <li>
                    <a href="#Test文字文字">Test文字文字</a>
                  </li>
                  <li>
                    <a href="#回首頁">
                      <FontAwesomeIcon icon={faHome} />
                      回首頁
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </nav>

添加CSS

.flex-container{
    display: flex;
}

ul{
    display: flex;
}
li{
    margin-right: 35px;
    list-style: none;
}
a{

text-decoration:none
}

Answer 4

您是否可以对DOM结构进行少量更改以实现相同的效果，而无需进行任何进一步的更改。

<div>
  <nav>
    <div>
      <div>
        <div className="container">
          <div>
            <ul>
              <li><a href="#home">
                  <img src={image} alt="logo"/>
                </a>
              </li>
              <li><a href="#01文字文字">01文字文字</a></li>
              <li><a href="#02文字文字">02文字文字</a></li>
              <li><a href="#03文字文字">03文字文字</a></li>
              <li><a href="#04文字文字">04文字文字</a></li>
              <li><a href="#Test文字文字">Test文字文字</a></li>
              <li>
                <a href="#回首頁">
                  <FontAwesomeIcon icon={faHome} />回首頁</a>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </nav>
</div>

希望这会有所帮助！

如何使我的菜单在同一水平线上？

4 个答案: