如何移动导航文本的位置？

Question

我尝试创建导航栏，但它不能与我的html body中的背景完美对齐。这是我到目前为止所得到的：

HTML：

<div class="head-nav">
    <ul class="navigasi">
      <li><a href="#">FACEBOOK</a></li>
      <li><a href="#">PORTAL</a></li>
      <li><a href="#">FORUM</a></li>
    </ul>
</div>

CSS：

.navigasi {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding-bottom: 40px;
}

.navigasi li{
    display: inline-block;
}

.navigasi >li> a {
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    font-style: italic;
    padding: 15px;
    margin-top: 29px;
}

我想左右移动FACEBOOK，PORTAL和FORUM，以便与每个盒子对齐。我尝试在HTML中添加样式：

<li><a style="left: 30px;" href="#">FACEBOOK</a></li>

但它不会奏效。 你能帮助我吗？谢谢。

Answer 1

每当您想要left，right，top或bottom申请时，请为position提供static以外的<li><a style="left: 30px;position:relative;" href="#">FACEBOOK</a></li> 是默认的）：

production.ERROR: PDOException: SQLSTATE[HY000] [2002] No such file or directory in /app/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:55
Stack trace:
#0 /app/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php(55): PDO->__construct('mysql:host=;dbn...', NULL, NULL, Array)
#1 /app/vendor/laravel/framework/src/Illuminate/Database/Connectors/MySqlConnector.php(22): Illuminate\Database\Connectors\Connector->createConnection('mysql:host=;dbn...', Array, Array)
#2 /app/bootstrap/cache/compiled.php(11387): Illuminate\Database\Connectors\MySqlConnector->connect(Array)
#3 /app/bootstrap/cache/compiled.php(11383): Illuminate\Database\Connectors\ConnectionFactory->createSingleConnection(Array)
#4 /app/bootstrap/cache/compiled.php(11298): Illuminate\Database\Connectors\ConnectionFactory->make(Array, 'mysql')
#5 /app/bootstrap/cache/compiled.php(11253): Illuminate\Database\DatabaseManager->makeConnection('mysql')
#6 /app/vendor/laravel/framework/src/Illuminate/Database/Migrations/DatabaseMigrationRepository.php(171): Illuminate\Database\DatabaseManager->connection('mysql')
#7 /app/vendor/laravel/framework/src/Illuminate/Database/Migrations/DatabaseMigrationRepository.php(139): Illuminate\Database\Migrations\DatabaseMigrationRepository->getConnection()
#8 /app/vendor/laravel/framework/src/Illuminate/Database/Migrations/Migrator.php(393): Illuminate\Database\Migrations\DatabaseMigrationRepository->repositoryExists()
#9 /app/vendor/laravel/framework/src/Illuminate/Database/Console/Migrations/MigrateCommand.php(100): Illuminate\Database\Migrations\Migrator->repositoryExists()
#10 /app/vendor/laravel/framework/src/Illuminate/Database/Console/Migrations/MigrateCommand.php(58): Illuminate\Database\Console\Migrations\MigrateCommand->prepareDatabase()
#11 [internal function]: Illuminate\Database\Console\Migrations\MigrateCommand->fire()
#12 /app/bootstrap/cache/compiled.php(1181): call_user_func_array(Array, Array)
#13 /app/vendor/laravel/framework/src/Illuminate/Console/Command.php(150): Illuminate\Container\Container->call(Array)
#14 /app/vendor/symfony/console/Command/Command.php(256): Illuminate\Console\Command->execute(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
#15 /app/vendor/laravel/framework/src/Illuminate/Console/Command.php(136): Symfony\Component\Console\Command\Command->run(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
#16 /app/vendor/symfony/console/Application.php(838): Illuminate\Console\Command->run(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
#17 /app/vendor/symfony/console/Application.php(189): Symfony\Component\Console\Application->doRunCommand(Object(Illuminate\Database\Console\Migrations\MigrateCommand), Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
#18 /app/vendor/symfony/console/Application.php(120): Symfony\Component\Console\Application->doRun(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
#19 /app/vendor/laravel/framework/src/Illuminate/Foundation/Console/Kernel.php(107): Symfony\Component\Console\Application->run(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
#20 /app/artisan(35): Illuminate\Foundation\Console\Kernel->handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
#21 {main}  




  [PDOException]                                    
  SQLSTATE[HY000] [2002] No such file or directory

Answer 2

在.navigasi＆gt; li＆gt;上给它一个文本对齐属性。 a而不是给它text-align：to right。

`.navigasi >li> a {
    text-align: left;
    font-weight: bold;
    font-size: 1.5em;
    font-style: italic;
    padding: 15px;
    margin-top: 29px;
}`