主页 / user-193678

E_K's questions

Martin Hope
E_K
Asked: 2022-08-14 05:45:07 +0000 UTC
  • 0

由于异步函数，Puppeteer 不会响应重定向permissionsTest，如果您仅从该函数返回一个值，则一切正常。可能是什么问题呢？

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({dumpio: true});
  const page = await browser.newPage();
  const response = await page.goto('http://localhost:8001');
  const [, page2] = await browser.pages();
  console.log(page2.url());

  await browser.close();
})();

页面上的代码 -http://localhost:8001

const tests = [
  permissionsTest,
];

window.addEventListener('DOMContentLoaded', async () => {

  await analyze();

  window.location.href = 'https://google.com';
});

async function analyze() {
  let br = 0;

  for (let test of tests) {
    br += await test();
  }

  return br;
}

async function permissionsTest() {
  let permissionStatus = await navigator.permissions.query({name: 'notifications'});

  if (Notification.permission === 'denied' && permissionStatus.state === 'prompt') {
    return 20;
  }

  return 0;
}
javascript puppeteer
Martin Hope
E_K
Asked: 2022-08-14 02:04:38 +0000 UTC
  • 0

我需要功能按照调用顺序工作。添加async/await但没有帮助。如何正确使用？

该函数analyze遍历数组并调用写入其中的函数并对结果求和。

该函数initFingerprintJS应该返回一个值，但是，我不熟悉 JS，因此它是在这些回调、promise 和async/await. 因此，我决定直接写入变量。

期望的结果：开始 -> 分析 (c:0, c:1) -> SET ID -> ID -> END

const counters = [
  function() {
    return navigator.webdriver ? 5 : 0;
  },
  function() {
    let agent = window.navigator.userAgent;

    if (/headless/i.test(agent) || /PhantomJS/i.test(agent)) {
      return 3;
    }

    return 0;
  },
  function() {
    navigator.permissions.query({
      name: 'notifications'
    }).then(function(permissionStatus) {
      if (Notification.permission === 'denied' && permissionStatus.state === 'prompt') {
        return 10;
      }
    });

    return 0;
  }
];

let id;

window.addEventListener('DOMContentLoaded', async function() {
  console.log('START');

  let res = await analyze();

  initFingerprintJS();

  console.log('ID: ' + id);

  console.log('END');
});

async function analyze() {
  let r = 0;

  counters.forEach((v, k) => {
    console.log('c: ' + k);
    r += v();
  });

  return r;
}


function initFingerprintJS() {
  let fpPromise =
    import ('https://openfpcdn.io/fingerprintjs/v3')
    .then(FingerprintJS => FingerprintJS.load({
      region: 'eu'
    }));

  fpPromise
    .then(fp => fp.get())
    .then(result => {
      console.log('SET ID');
      id = result.visitorId;
    });
}

javascript
Martin Hope
E_K
Asked: 2022-07-28 20:14:11 +0000 UTC
  • 0

当我尝试在自定义插件中进行重定向时，出现错误。我检查了所有文件，<?php标签前没有空格，我没有输出任何数据。禁用其他插件。

wp-1 | [Thu Jul 28 11:49:13.550986 2022] [php7:warn] [pid 24] [client 172.21.0.1:38412] PHP Warning:  Cannot modify header information - headers already sent by (output started at /var/www/html/wp-admin/includes/template.php:2546) in /var/www/html/wp-includes/pluggable.php on line 1424, referer: http://localhost:8081/wp-admin/admin.php?page=kws

插件文件。

function run_countries() {
    $plugin = new Plugin();
    $plugin->run();
}

add_action( 'init', 'run_countries' );

class Plugin {
    public function __construct() {
        // ...
        $this->load_dependencies();
        $this->define_admin_hooks();

    }

    private function load_dependencies() {

        require_once plugin_dir_path( __DIR__ ) . 'inc/class-plugin-loader.php';

        require_once plugin_dir_path( __DIR__ ) . 'admin/class-admin.php';

        $this->loader = new Plugin_Loader();

    }
    private function define_admin_hooks() {

        $plugin_admin = new Admin( $this->get_plugin_name(), $this->get_version() );

        $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' );
        $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' );

        $this->loader->add_action( 'admin_menu', $plugin_admin, 'add_admin_menu' );
}

}

if ( ! class_exists( 'Admin_Request_Handler' ) ) {
    require_once plugin_dir_path( __FILE__ ) . 'inc/class-admin-request-handler.php';
}
class Admin {
    public function __construct( $plugin_name, $version ) {
        $this->request_handler = new Admin_Request_Handler();
    }
    public function add_admin_menu() {
        add_menu_page(
            'Domains',
            'Domains',
            static::CAPABILITY,
            static::SLUG,
            [ $this->request_handler, 'show_table' ],
        );
}
}

class Admin_Request_Handler {
    public function show_table() {
        $table = new Domains_List_Table();

        $table->process_bulk_action();

        if ( ! empty( $_REQUEST['_wpnonce'] ) ) {
            wp_redirect( remove_query_arg(
                [
                    '_wp_http_referer',
                    '_wpnonce',
                ],
                $_SERVER['REQUEST_URI']
            ) );
        }

        require_once plugin_dir_path( __DIR__ ) . 'partials/page-list.php';
    }
}

还有什么可能的原因？以及如何修复initob_start()以外的其他问题？

wordpress
Martin Hope
E_K
Asked: 2022-09-18 22:01:36 +0000 UTC
  • 0

有一个代码接受 json 数据，并根据类型执行某些操作。所有处理代码都在 if 中，添加新类型被证明是不方便的。现在我计划将处理转移到每种类型的单独服务中，并使用 DTO 转移信息。但是，它仍然没有消除 if 的复杂性和数量。我考虑过用 switch / match 替换它的可能性，但这个选项似乎并不完全正确。我在代码的另一部分遇到了类似的问题，需要根据状态进行不同的处理。

if ('text' === $message->getType()) {
    // code
}
if ('poll' === $message->getType()) {
    // code
}
if ('image' === $message->getType()) {
    // code
}

我在理论上对 OOP 有点熟悉，在实践中，有意义的是，它很少使用。据我所知，多态应该有助于解决问题，但我不明白如何正确应用它。

php
Martin Hope
E_K
Asked: 2020-03-26 05:51:53 +0000 UTC
  • 0

为什么会出现错误

无法读取未定义的属性“forEach”

当作业在一个init.

this.inputs = document.querySelectorAll('[form="deleteMany"]')

但是，如果您将分配转移到该方法，则selectAll一切正常。

window.addEventListener('load', function() {
  var selector = {
    input: null,
    inputs: null,
    selected: false,
    init(elemId) {
      this.input = elemId ? elemId : "js-select-all";
      this.inputs = document.querySelectorAll('[form="deleteMany"]');
      this.addEvent();
    },
    addEvent() {
      document.getElementById(this.input).addEventListener('change', this.selectAll);
    },
    selectAll() {
      if (!this.selected) {
        this.inputs.forEach(e => e.checked = true);
        this.selected = true;
        return;
      }

      this.inputs.forEach(e => e.checked = false);
      this.selected = false;
    }
  };

  selector.init('js-select-all');
  console.log(selector.inputs);
});
<table>
  <thead>
    <tr>
      <td><input id="js-select-all" type="checkbox"></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input form="deleteMany" type="checkbox"></td>
    </tr>
    <tr>
      <td><input form="deleteMany" type="checkbox"></td>
    </tr>
    <tr>
      <td><input form="deleteMany" type="checkbox"></td>
    </tr>
  </tbody>
</table>

javascript
Martin Hope
E_K
Asked: 2020-01-20 07:43:44 +0000 UTC
  • 0

您需要在表格中获取每个产品的结果

$product->features = [
   [
      'id' => 1,
      'name' => 'Weight'
      'values' => [
          ['value' => 10],
          ['value' => 15]
       ]
   ],
   ...
];

目前，我能够使用此代码获得这样的结果。

$products = Product::whereIsActive(true)->with([
            'brand',
            'categories',
            'values.feature'
        ])->get([
            'id',
            'name',
            'brand_id'
            ])->map(function($p, $key) {

            foreach ($p->values as $v) {
                if (! array_key_exists($v->feature->id, $p->features)) {
                    $p->features[$v->feature->id]['data'] = $v->feature;
                }

                $p->features[$v->feature->id]['values'][] = $v;
            }

            return $p;
        });

最初，采样后的结果是

{
 features => [],
 values => [
   0 => [
     'value' => 5,
     'feature' => [
       'id' => '1'    
       'name' => 'Weight'
     ]
   ],
   1 => [
     'value' => 5,
     'feature' => [
       'id' => '1'    
       'name' => 'Weight'
     ]
   ]
  ],
}

做完之后map()

{
 features => [
  1 => [
    id => 1,
    name => 'Weight',
    values => [
    0 => [
     'value' => 5,
     'feature' => [
       'id' => '1'    
       'name' => 'Weight'
     ]
   ],
   1 => [
     'value' => 5,
     'feature' => [
       'id' => '1'    
       'name' => 'Weight'
     ]
   ]
  ]
 ],
 values => [
   0 => [
     'value' => 5,
     'feature' => [
       'id' => '1'    
       'name' => 'Weight'
     ]
   ],
   1 => [
     'value' => 5,
     'feature' => [
       'id' => '1'    
       'name' => 'Weight'
     ]
   ]
  ],
}

但是，问题在于，为此，您需要在Product模型中创建一个附加模型。公共属性features并将迭代的结果写入其中。是否有另一种更正确和更简单的解决方案来解决这个问题？

产品

+----+-----------+-----------+
| id | is_active | name      |
+----+-----------+-----------+
|  1 |         1 | Flower red|
+----+-----------+-----------+

class Product extends Model
{
    public $features = [];

    public function values()
    {
        return $this->belongsToMany(
            FeatureValue::class,
            'feature_product',
            'product_id',
            'value_id',
            'id'
        )->withPivot('product_id','feature_id', 'value_id');
    }
}

特征和特征值

+----+--------+          +----+------------+-------+
| id | name   |          | id | feature_id | value |
+----+--------+          +----+------------+-------+
|  1 | Weight |          |  1 |          1 | 3     |
+----+--------+          |  2 |          1 | 5     |
                         +----+------------+-------+

class Feature extends Model
{
    public function values()
    {
        return $this->hasMany(FeatureValue::class)->orderBy('id', 'desc');
    }

}


class FeatureValue extends Model
{
    public function feature()
    {
        return $this->belongsTo(Feature::class);
    }

    public function product()
    {
        return $this->belongsToMany(
            Product::class,
            'feature_product',
            'product_id'
        );
    }
}

枢轴特征_产品

+------------+------------+----------+
| feature_id | product_id | value_id |
+------------+------------+----------+
|          1 |          1 |        1 |
|          1 |          1 |        2 |
+------------+------------+----------+
php
Martin Hope
E_K
Asked: 2020-12-29 08:00:51 +0000 UTC
  • 0

文件说

在大多数情况下，所有 PHP 变量只有一个作用域。这个单一的范围还包括包含和必需的文件。

在我的示例中，我在控制器/index.php文件中收到错误/警告

注意：未定义变量：app 在第 4 行

解释为什么会这样？该变量$task工作正常。

ps 如果您在文件中声明global $app;或将其替换Route::load . . . 为require 'controllers/index.php';一切正常。

索引.php

require 'core/bootstrap.php';

Router::load('routes.php')
    ->direct(Request::uri(), Request::method()); //require controllers/index.php

引导程序.php

$app = [];
$app['config'] = require 'config.php';

require 'Request.php';
require 'Router.php';
require 'database/Connection.php';
require 'database/QueryBuilder.php';

$app['database'] = new QueryBuilder(
    Connection::make($app['config']['database'])
);

控制器/index.php

// global $app;
$tasks = $app['database']->selectAll('tasks'); //4 строка

require 'public/index.view.php';

公共/index.view.php

<?php require 'partials/header.php'; ?>

<h1>Home page</h1>

<?php if (!is_null($tasks)) : ?>
    <ul>
        <?php foreach ($tasks as $t) : ?>
            <li><?= $t->text; ?></li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

<?php require 'partials/footer.php'; ?>

路由器.php

class Router {
    protected $routes = [];

    public static function load($file)
    {
        $router = new static;

        require $file;

        return $router;
    }

    public function define($routes)
    {
        $this->routes = $routes;
    }

    public function direct($uri, $requestMethod)
    {
        if (array_key_exists($uri, $this->routes[$requestMethod])) {
            require $this->routes[$requestMethod][$uri];
        } else {
            require 'public/404.php';
        }
    }
}
php
Martin Hope
E_K
Asked: 2020-10-18 22:15:39 +0000 UTC
  • 0

如何获取标签的值<category>并将其写入数组？

问题是我无法以任何方式获取标签<category>（家用灯echo）的内容，除了返回对象（SimpleXMLElement）之外的任何尝试。

<?php

$file = <<<XML
<yml_catalog date="2019-10-18 16:00">
    <shop>
        <categories>
            <category id="41" parentId="38">Лампы бытовые</category>
            <category id="42" parentId="41">A60</category>
        </categories>
    </shop>
</yml_catalog>
XML;

$value = new SimpleXMLElement($file);

$categories = [];

foreach ($value->shop->categories->category as $c) {

    $categories[(int)$c->attributes()['id']] =
    [
        'id' => (int)$c->attributes()['id'],
        'parentId' => (int)$c->attributes()['parentId'],
        'name' => $c[0]                                   // object(SimpleXMLElement)
    ];

    echo '<pre>';
    var_dump($categories[(int)$c->attributes()['id']]);
    echo '</pre>';
    echo '<hr>';
}

导致var_dump循环

array(3) {
["id"]=>
int(41)
["parentId"]=>
int(38)
["name"]=>
object(SimpleXMLElement)#6 (2) {
    ["@attributes"]=>
    array(2) {
    ["id"]=>
    string(2) "41"
    ["parentId"]=>
    string(2) "38"
    }
    [0]=>
    string(25) "Лампы бытовые"
}
}
php
Martin Hope
E_K
Asked: 2020-06-27 23:08:42 +0000 UTC
  • 0

有 2 个表，我需要将列值price增加s_variants10% wherebrand_id = 84和price < 1000. 我试图通过JOIN它来做它不起作用，我通过一个子查询尝试它

UPDATE `s_variants` 
SET `s_variants`.`price`= `s_variants`.`price` * 1.1  
WHERE `s_variants`.`price` < 1000 
AND `s_variants`.`product_id` = 
(SELECT `s_products`.`id` FROM `s_products` WHERE `s_products`.`brand_id` = 84)

但是，我收到子查询返回多个选项的错误。如何提出完成任务的请求？

s_products表

|  id  |  brand_id  |
 -------------------
|   1  |     21     |
|   5  |     84     |
|  235 |     84     |

s_variants表

|  id  | product_id |  price |
 ----------------------------
|  38  |     1      |   545  |
|  25  |     5      |   158  |
|  35  |     235    |   999  |
mysql
Martin Hope
E_K
Asked: 2020-04-23 06:17:10 +0000 UTC
  • 1

问题是，即使delay: 0在更换幻灯片之前有一个停止。如何彻底去除？

var swiper = new Swiper('#js-carousel', {
  slidesPerView: 3,
  spaceBetween: 30,
  speed: 2000,
  loop: true,
  autoplay: {
    delay: 0,
  },
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div class="container">
  <div class="row">
    <div class="swiper-container" id="js-carousel">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 1" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 2" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 3" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 4" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 5" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 6" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 7" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 8" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 9" alt="">
        </div>
        <div class="swiper-slide" style="text-align: center">
          <img src="https://via.placeholder.com/200x100?text=Img 10" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

javascript
Martin Hope
E_K
Asked: 2020-12-13 08:27:19 +0000 UTC
  • 4

为什么具有属性的元素второй从第一列开始放置？但是，如果您设置一个元素（第五个块）应该占用多少条车道，那么它会保留在原来的位置。третийgrid-row: 1 / -1grid-row: span 2

.grid {
  display: grid;
  padding: 5rem;
  grid-template-rows: [start1] 100px [end1 start2] 100px  [end2] 50px;
  grid-template-columns: repeat(5, 1fr);
  //grid-auto-flow: row;
  grid-gap: 1rem;
}
.grid__item {
  width: 100%;
  height: 100%;
  background-color: #eaeaea;
  font-size: 24px;
  font-weight: bold;
}

.grid__item-2 {
  grid-row: 1 / -1;
}
.grid__item-3 {
  grid-row-start: start1;
  grid-row-end: end2;
}
.grid__item-5 {
  grid-row: span 2;
}
<div class="grid">
  <div class="grid__item grid__item-1">1</div>
  <div class="grid__item grid__item-2">2</div>
  <div class="grid__item grid__item-3">3</div>
  <div class="grid__item grid__item-4">4</div>
  <div class="grid__item grid__item-5">5</div>
</div>

css
Martin Hope
E_K
Asked: 2020-10-17 20:46:02 +0000 UTC
  • 0

Sticky Foundation 插件在 Mozilla 中不起作用。控制台中没有错误，一切都已连接。Windows 10、Firefox 62.0.3 为什么以及如何修复？

$(document).foundation();
.x-header {
  height: 20vh;
  background-color: #eaeaea;
}
.x-nav__sticky {
  height: 50px;
  background-color: lightcoral;
}
.x-content {
  height: 150vh;
  background-color: #eaeaea;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0-rc.3/js/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0-rc.3/css/foundation.min.css" rel="stylesheet"/>
<div class="x-layout">
  <div class="x-header" id="jsHeader"></div>
  <div class="x-nav" data-sticky-container>
    <div class="x-nav__sticky sticky" data-sticky data-options="marginTop:0;stickyOn:small;"
data-top-anchor="jsHeader:bottom">
      Sticky
    </div>
  </div>
  <div class="x-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus perferendis laboriosam aut fuga voluptatum molestias ullam, enim impedit quia sed neque reiciendis pariatur quis porro, animi laudantium amet fugiat id!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus perferendis laboriosam aut fuga voluptatum molestias ullam, enim impedit quia sed neque reiciendis pariatur quis porro, animi laudantium amet fugiat id!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus perferendis laboriosam aut fuga voluptatum molestias ullam, enim impedit quia sed neque reiciendis pariatur quis porro, animi laudantium amet fugiat id!</p>    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus perferendis laboriosam aut fuga voluptatum molestias ullam, enim impedit quia sed neque reiciendis pariatur quis porro, animi laudantium amet fugiat id!</p>    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus perferendis laboriosam aut fuga voluptatum molestias ullam, enim impedit quia sed neque reiciendis pariatur quis porro, animi laudantium amet fugiat id!</p>
</div>
</div>

javascript
Martin Hope
E_K
Asked: 2020-09-29 17:35:07 +0000 UTC
  • 1

单击按钮时，您需要滚动到该块top-bar，然后才运行脚本的其余部分。如何跟踪此事件？ 

$(".js-btn").on("click", function() {
  var barPosition = $(".top-bar").offset().top;

  window.scrollTo({
    top: barPosition,
    behavior: "smooth"
  });
  $(".content").text("Scroll");
  });
.header {
  height: 100px;
  background: #eaeaea;
}

.top-bar {
  height: 40px;
  background: lightblue;
  display: flex;
  align-items: center;
  padding: 0 20px 0;
}

.content {
  height: 500px;
  background: lightcoral;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<header class="header"></header>
<div class="top-bar">
  <button type="button" class="btn js-btn">Click</button>
</div>
<div class="content"></div>

javascript
Martin Hope
E_K
Asked: 2020-07-20 03:07:32 +0000 UTC
  • 1

watch 任务没有启动，服务器启动，之后什么都没有。有什么问题以及如何解决？

[22:03:35] Finished 'clean' after 13 ms
[22:03:36] Starting 'pages'...
[22:03:36] Starting 'sass'...
[22:03:36] Finished 'pages' after 470 ms
[22:03:36] Finished 'sass' after 471 ms
[22:03:36] Starting 'server'...
[Browsersync] Access URLs:

gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
// var notify = require('gulp-notify');
var browser = require('browser-sync').create();
var panini = require('panini');
var rimraf = require('rimraf');

gulp.task('server', function () {
  browser.init({
    server: "dist",
    port: 8080,
    open: true,
    notify: false
  });
});

gulp.task('reload', function(done) {
  browser.reload();
  done();
});

gulp.task('sass', function() {
  return gulp.src('src/assets/scss/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css/'))
    .pipe(browser.reload({
      stream: true
    }));
});

gulp.task('pages', function() {
  return gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
      partials: 'src/partials/',
      data: 'src/data/',
      helpers: 'src/helpers/'
    }))
    .pipe(gulp.dest('dist'))
    .pipe(browser.reload({
      stream: true
    }));
});

gulp.task('resetPages', function(done) {
  panini.refresh();
  done();
});

gulp.task('clean', function(done) {
  rimraf('dist', done);
});

gulp.task('watch', function() {
  gulp.watch('src/assets/scss/**/*', gulp.series('sass', browser.reload));
  gulp.watch('src/pages/**/*.html', gulp.series('pages', 'refresh', browser.reload));
  gulp.watch('src/{layouts,partials}/**/*.html', gulp.series('resetPages', 'pages', browser.reload));
});

gulp.task('default',
  gulp.series('clean', gulp.parallel('pages', 'sass'),'server','watch'));
javascript
Martin Hope
E_K
Asked: 2020-03-21 21:00:02 +0000 UTC
  • 0

为什么，如果给定元素表格单元格和 1% 的宽度，它们之间是否共享父元素的整个宽度？为什么，当窗口大小减小时，第一个元素上会出现难以理解的填充，从而将其向下移动？

.nav {
  list-style: none;
  border: 1px solid #eaeaea;
  height: 60px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.nav__item {
  display: table-cell;
  width: 1%;
}
.nav__item:not(:last-child) {
  border-right: 1px solid #eaeaea;
}
.nav__item-link {
  width: 100%;
  height: 60px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
<ul class="nav">
  <li class="nav__item"><a href="#" class="nav__item-link">Link 1 222222</a></li>
  <li class="nav__item"><a href="#" class="nav__item-link">Link 2</a></li>
  <li class="nav__item"><a href="#" class="nav__item-link">Link 3</a></li>
  <li class="nav__item"><a href="#" class="nav__item-link">Link 4</a></li>
  <li class="nav__item"><a href="#" class="nav__item-link">Link 5</a></li>
</ul>

css