在导航栏上放置徽标会影响导航栏上的整个文本

时间：2020-05-26 12:27:45

标签： javascript html jquery css twitter-bootstrap

我的网站导航栏出现问题，该导航栏太宽了，因为放置了徽标，它会影响文本，使它们都粘在顶部，如何使文本或徽标彼此对齐？

<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #242626;
  font-family: Arial, Helvetica, sans-serif;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: #cedacb;
  text-align: center;
  padding: 14px 16px;
  widht: 120px;
  min-height: 60px;
  vertical-align: top;
  text-decoration: none;
}

li a:hover {
  color: white;
}

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#home {
  width: 120px;
  height: 60px;
  background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
}

#logo { 
  float: left; 
}

</style>
</style>
</head>
<body>

<ul>
  <li><a href="#home"><img id="home" src="https://st.deviantart.net/minish/main/logo/card_black_large.png" alt="Logo" id="logo"></a></li>
  <li><a href="#search">Search</a></li>
  <li><a href="#news">Submit</a></li> 
  <li class="dropdown" style="float:right;">
    <a href="javascript:void(0)" class="dropbtn">Notification</a>
    <div class="dropdown-content" style="right:0;">
      <a href="#">All Inbox</a>
      <a href="#">Inbox</a>
      <a href="#">Watch</a>
      <a href="#">Note</a>
    </div>
  </li>
</ul>

</body>
</html>`

我正在使用的网站导航栏：

为了澄清不，我不是为Deviantart工作，我选择图片做徽标练习，但起初它不适合，然后我更改代码，以便可以将此代码适合于导航栏< / p> 

#home {
width: 120px;
height: 60px;
background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
}

它将文本固定在导航栏上，我该如何修复它以便它们全部对齐？

3 个答案:

答案 0 :(得分：0)

您可以将flex应用于父（ul），为其指定一个类名，这样它就不会应用于您的所有（ul），请尝试以下操作：

data = """
n|vechicle.car.characteristics[0].speed|180
n|vechicle.car.characteristics[0].weight|3
c|vechicle.car.characteristics[0].color|black
c|vechicle.car.characteristics[0].fuel|95
n|vechicle.car.characteristics[1].speed|160
c|vechicle.car.characteristics[1].color|green
c|vechicle.car.characteristics[1].fuel|92
n|vechicle.car.characteristics[2].speed|200
n|vechicle.car.characteristics[2].weight|5
c|vechicle.car.characteristics[2].fuel|95
n|vechicle.car.characteristics[3].speed|180
n|vechicle.car.characteristics[3].weight|3
c|vechicle.car.characteristics[3].color|black
c|vechicle.car.characteristics[3].fuel|95
c|vechicle.car.characteristics[3].cost|30000"""

import pandas as pd
from io import StringIO

res = (pd.read_csv(StringIO(data), sep="|", header = None)
       #extract the numbers from col 1
       .assign(number = lambda x: x[1].str.extract(r"(\d+)"),
               #get the tail of the string in column 1
               headers = lambda x: x[1].str.split(r"\[\d+\]\.").str[-1]
              )
        #set numbers and headers as index 
        #and keep only the last column, which is relevant
       .set_index(['number','headers'])
       .filter([2])
        #unstacking here ensures the headers
       # are directly on top of each related data in column 2
       .unstack()
        #some cleanups
       .droplevel(0,axis=1)
       .rename_axis(None,axis=1)
       .rename_axis(None)
      )

res


   color    cost    fuel    speed   weight
0   black   NaN     95      180       3
1   green   NaN     92      160       NaN
2   NaN     NaN     95      200       5
3   black   30000   95      180       3

祝你好运。

答案 1 :(得分：0)

这里是解决方案。我对html结构进行了一些更改。如果您需要其他内容，请告诉我。谢谢

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { MessageComponent } from './message/message.component';
import { MaintainDataExportComponent } from './data-export/maintain-data-export.component';
import { DefineDataRetentionComponent } from './define-data-retention/define-data-retention.component';
import { MaintainAgentsComponent } from './agents/maintain-agents.component';
import { MaintainSuppliersComponent } from './agents/maintain-suppliers.component';
import { MaintainDtnAutomationComponent } from './dtn-automation/maintain-dtn-automation.component';
import { MaintainSscsComponent } from './sscs/maintain-sscs.component';
import { DeleteHalfHourlyDataComponent } from './delete-half-hourly-data/delete-half-hourly-data.component';
import { DeleteInvalidAppointmentsComponent } from './delete-invalid-appointments/delete-invalid-appointments.component';
import { MaintainSccLoadControlComponent } from './ssc-load-control/maintain-ssc-load-control.component';

import { MaintainDataExportResolver } from '../services/resolvers/maintain-data-export.resolver';
import { MessageResolver } from '../services/resolvers/message.resolver';
import { MaintainAgentsResolver } from '../services/resolvers/maintain-agents.resolver';
import { DataRetentionResolver } from '../services/resolvers/data-retention.resolver';
import { BusinessScenariosResolver } from '../services/resolvers/dtn-automation.resolver';
import { SscValuesResolver } from '../services/resolvers/ssc-values.resolver';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },

  {
    path: 'message',
    children: [
      {
        path: ':pipelineId',
        component: MessageComponent,
        resolve: {
          message: MessageResolver,
        },
      },
    ],
  },
  {
    path: 'maintain-agents',
    component: MaintainAgentsComponent,
    resolve: {
      agents: MaintainAgentsResolver,
    },
  },
  {
    path: 'maintain-suppliers',
    component: MaintainSuppliersComponent,
  },
  {
    path: 'maintain-data-export',
    component: MaintainDataExportComponent,
    resolve: {
      exportTypes: MaintainDataExportResolver,
    },
  },
  {
    path: 'maintain-dtn-automation',
    component: MaintainDtnAutomationComponent,
    resolve: {
      scenarios: BusinessScenariosResolver,
    },
  },
  {
    path: 'maintain-ssc',
    component: MaintainSscsComponent,
    resolve: {
      sscs: SscValuesResolver,
    },
  },
  {
    path: 'delete-half-hourly-data',
    component: DeleteHalfHourlyDataComponent,
  },
  {
    path: 'delete-invalid-appointments',
    component: DeleteInvalidAppointmentsComponent,
  },
  {
    path: 'define-data-retention',
    component: DefineDataRetentionComponent,
    resolve: {
      retentionTypes: DataRetentionResolver,
    },
  },
  {
    path: 'maintain-ssc-load-control',
    component: MaintainSccLoadControlComponent,
    resolve: {
      sscs: SscValuesResolver,
    },
  },
  { path: '**', redirectTo: 'home' },

];

export const AppRouting = RouterModule.forRoot(routes, {
  preloadingStrategy: PreloadAllModules,
});

答案 2 :(得分：0)

您是否要这样做（Click to see the result of this code） 

    <head>
        <title>Nav-bar</title>
        <style>
            body{
                margin: 0;
            }
            .navbar{
                width: 100%;
                height: 60px;
                background-color: #242626;
                font-family: Arial, Helvetica, sans-serif;

            }
            .nav-brand{
                width: 120px;
                height: 60px;
                display: inline-block;
            }

            .nav-item{
                align-items: left;
                display: inline-block;
                float: right;
            }

            .nav-item ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                font-family: Arial, Helvetica, sans-serif;
                display:table-cell;
                vertical-align: middle;
                height: 60px;
            }

            .nav-item ul li{
                float: left;
                padding-right:30px;

                padding-top: 5px;
                margin: 0 auto;

            }

            .nav-item ul li a{
                color: aliceblue;
                text-decoration: none;
                font-family: candara;
            }

    <style>
    .dropdown {
    position: relative;
    display: inline-block;
    }

    #dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

    #dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    }

    #dropdown-content a:hover {
    background-color: #f1f1f1;
    color: black;
    }

    .dropdown:hover #dropdown-content {
    display: block;
    }

    #home {
    width: 120px;
    height: 60px;
    background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
    }

    #logo { 
    float: left; 
    }

    </style>

        </style>
    </head>

    <body>
        <div class="navbar">
            <div class="nav-brand">
                <span class="brand-img">
                    <img id="home"  src="https://st.deviantart.net/minish/main/logo/card_black_large.png" alt="Logo" 
                    width="100%" height="60px">
                </span>
            </div>
                <div class="nav-item">
            <ul>

                    <li><a href="#search">Search</a></li>
                    <li><a href="#submit">Submit</a></li>
                    <li class="dropdown"><a  href="javascript:void(0)" class="dropbtn">Notification</a>
                    <div id="dropdown-content" style="right:0;">
                        <a href="#">All Inbox</a>
                        <a href="#">Inbox</a>
                        <a href="#">Watch</a>
                        <a href="#">Note</a>
                    </div></li>
                </div>
            </ul>
        </div>
    </body>

    </html>

（Click to see the result of this code）

相关问题
最新问题