Question

我正在处理react项目，因为我有一个锚标签，然后有一个导航栏。问题是锚标记将导航栏推到右侧。因为锚标记占用了额外的空白。我什至尝试使用display: 'inline-block'，但是它不起作用。

Navbar.js

import React, { Component } from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';

class Navbar extends Component {
    render() {
        return (
            <div className='container-fluid custom'>
                <div className='container'>
                    <div className='row'>
                        <div className='col-12'>
                            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                                <a className="navbar-brand space" href="www.facebook.com">
                                    <div className='logo'>
                                        <img src='assets/images/kaboom.png' alt='logo'></img>
                                    </div>
                                </a>
                                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                                    <span className="navbar-toggler-icon"></span>
                                </button>
                                <div className="collapse navbar-collapse" id="navbarNav">
                                    <ul className="navbar-nav">
                                        <li className="nav-item active">
                                            <Link className='nav-link' to='/'>Home</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link className='nav-link' to='/register'>Register</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link className='nav-link' to='/login'>Login</Link>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Navbar

这是Navbar.css

.logo {
    width: 10%;
    display: inline-block;
}
.logo img {
    width: 100%;
}

.space {
    display: inline-block !important;
}

Answer 1

如果您可以向我们提供摘要或其他内容，那会更好您可以使用任何浏览器的开发人员工具找出导致空白的原因它可能是一个边距或填充，只需打开它并指向您的元素以找出答案，然后可以通过对该元素应用margin:0或padding:0来解决问题希望我能帮上忙！

Answer 2

请勿在锚标记内使用div。只需将徽标包裹在锚标签中，然后为该img标签提供任意宽度即可。像这样：

<a className="navbar-brand space"  href="www.facebook.com">
    <img src='assets/images/kaboom.png' width="150" alt='logo'></img>
</a>

为什么锚标记占用额外的空白？

2 个答案: