Question

一直在尝试编写一个小型网站设计代码，并且已经陷入了这个问题一段时间了。我的导航区域低于我的示例徽标，我需要它在右边，但是，我无法在那里得到它。我试过浮动，绝对定位，并使用col但是我做错了或者它不能正常工作。

我的HTML代码：

import React, { Component } from 'react';
import { BrowserRouter, Link, Redirect, Route, Switch } from 'react-router-dom';
import './App.css';

class App extends Component {
  state = { loggedIn: false };
  logIn = () => { this.setState({ loggedIn: true }); };
  logOut = () => { this.setState({ loggedIn: false }); };
  render() { return <Home loggedIn={this.state.loggedIn} logIn={this.logIn} logOut={this.logOut} />; }
}

const Home = ({ loggedIn, logIn, logOut }) => (
  <BrowserRouter>
    <div style={{ padding: 50 }}>
      <h2>Routing with React-Router</h2>
      <hr /><Navigation loggedIn={loggedIn} logOut={logOut} /><hr />
      <Switch>
        <Route
          path="/private_page"
          render={() => (
            loggedIn === true ? (
              <PrivatePage />
            ) : (
              <Redirect to="/login_page" />
            )
          )}
        />
        <Route path="/public_page" component={PublicPage} />
        <Route
          path="/login_page"
          render={() => (
            loggedIn === false ? (
              <LoginPage logIn={logIn} />
            ) : (
              <Redirect to="/private_page" />
            )
          )}
        />
        <Route exact path="/" render={() => <Redirect to="/public_page" />}/>
      </Switch>
    </div>
  </BrowserRouter>
);

const PrivatePage = () => <h4>This Is The Private Page</h4>;

const PublicPage = () => <h4>This Is The Public Page</h4>;

const LoginPage = ({ logIn }) => {
  const logInAndPush = async () => {
    await logIn();
    // push user to /private_page
  }
  return (
    <div>
      <h4>Click on button to logIn</h4>
      <button onClick={logInAndPush}>logIn</button>
    </div>
  );
};

const Navigation = ({ loggedIn, logOut }) => {
  const logInLink = loggedIn ? (
    <button onClick={logOut}>logOut</button>
  ) : (
    <Link to="/login_page">Login Page</Link>
  );

  return (
    <nav>
      <Link to="/private_page">Private Page</Link><br />
      <Link to="/public_page">Public Page</Link><br />
      {logInLink}
    </nav>
  );
};

export default App;

我的CSS代码：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.example.yusaf.myapplication"
        minSdkVersion 21
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:27.0.2'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
    // openCV library
    implementation project(':openCVLibrary')
    // Bytedeco library
    compile group: 'org.bytedeco', name: 'javacv-platform', version: '1.3.3'
}

A picture of my page, showcasing the issue at hand.

Answer 1

您可以使用position:fixed吗？在你的导航上尝试这个。它将导航管固定在右边缘，从顶部固定8像素。

position:fixed;
right:0px;
top: -8px;

Answer 2

给链接一个id并将其浮动到左侧。然后拿.nav然后漂浮吧！有时候想你漂浮正确的标签可以混淆你！

Answer 3

如果您可以在项目中使用flexbox，那么添加这些样式应该可以解决问题。另请参阅随附的代码笔链接。

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: middle;
    padding: 0 20px;
}

a, nav {
  align-self: center;
}

https://codepen.io/shanedaugherty/pen/vpxNLq

Answer 4

要将徽标容器向右浮动，您需要将浮动应用于父容器。您还需要将父项包装在div容器中，以便在导航链接之前清除浮动。

＆＃13;

header{
    background-color: #00829F;
    font-family: system-ui;
    color: white;
    font-size: 34px;
}

.logoContainer{
  display:block;
  float:right;
}

.clear:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

#logopic{
    padding-left: 10px;
    padding-bottom: 0px;
    padding-top: 5px;
}
    html, body{
    margin: 0px;
    padding: 0px;
}
ul {
    list-style-type: none;
}
li{
    display: inline;
}
a:link{
    color: white;
    text-decoration: none;
}
a:visited{
    color: white;
    text-decoration: none;
}
a:hover{
    color: white;
    text-decoration: none;
}
a:active{
    color: white;
    text-decoration: none;
}

＆＃13;

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <!-- Logo, Search Bar, Categories, and User Profile -->
        <div class="clear">
          <a class="logoContainer" href="index.html">
            <img height="64px" width="313px" id="logopic" src="http://via.placeholder.com/313x64">
          </a><!-- LogoPic linking to HomePage -->
        </div>
        <nav>
            <ul>
                <li><a href="#"> Home |</a></li>
                <li><a href="#"> Browse |</a></li>
                <li><a href="#"> Categories |</a></li>
                <li><a href="#"> Rising</a></li>
            </ul>
        </nav>
    </header>
</body>

＆＃13;

Answer 5

您可以使用flex属性来实现此目的：

让你的标题弯曲。它会自动将您的徽标和导航对齐在一行。要将徽标垂直对齐，您可以使用对齐项目居中。

header{
    background-color: #00829F;
    font-family: system-ui;
    color: white;
    display:flex;
    font-size: 34px;
    align-items:center;
    justify-content:space-between;
}

检查我的小提琴以获得更好的想法：JSFiddle

Justify-content将使您的徽标和导航栏之间有间距

我的导航栏显示在我的徽标下方，需要它在右侧

5 个答案: