主页 / user-27377

118_64's questions

Martin Hope
118_64
Asked: 2022-08-03 02:19:08 +0000 UTC
  • 1

我正在尝试构造

const handle = id => {
   setValue([...updated, { id: id, value: 0 }])
}

并使用扩展运算符添加/更新行，但如果值id已存在则获取重复行：

[
    0: {id: 1, value: 0}
    1: {id: 1, value: 0}
]

请告诉我如何获得不重复的结果，以及是否可以同时将值更改value为相反的结果，以获得以下结果：

[
    0: {id: 1, value: 1}
]
javascript
Martin Hope
118_64
Asked: 2022-02-16 19:33:44 +0000 UTC
  • 0

有一个使用 创建的表单React，当输入到 field 时name，会将值写入状态。输入任何字符后，该字段失去焦点。我知道useState刷新页面，这就是原因。

input为了解决这个问题，我为字段和外部元素都分配了键。结果是一样的。尝试添加input为外部元素，但表单不断更新。

所有代码都在这里发布：https ://codesandbox.io/s/me08n

我寻求有关如何在不重新加载输入的情况下创建表单的帮助和建议。下面是创建表单的文件的代码。

form.js：

import axios from "axios";

function Form({ data, funct }) {
  const HandleImageUpload = () => {
    const handleImage = (e) => {
      const target = imageLoader.files[0];
      const type = target.type.split("/");
      const typeArr = ["jpg", "jpeg", "gif", "png"];

      if (!typeArr.includes(type[1])) {
        funct.setButtonValue("Недопустимый формат");
        return;
      } else {
        funct.setButtonValue("Изображение загружено");
      }

      const reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);

      reader.onload = function (event) {
        const image = new Image();
        image.src = event.target.result;

        image.onload = function () {
          let imgWidth = image.width;
          let imgHeight = image.height;
          const orientation = imgWidth / imgHeight;

          if (imgHeight > 240 || imgWidth > 320) {
            if (orientation <= 1 || imgHeight * (320 / imgWidth) > 240) {
              imgWidth = imgWidth * (240 / imgHeight);
              imgHeight = 240;
            } else {
              imgHeight = imgHeight * (320 / imgWidth);
              imgWidth = 320;
            }
          }

          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          canvas.width = imgWidth;
          canvas.height = imgHeight;
          ctx.drawImage(image, 0, 0, imgWidth, imgHeight);

          const preview = new Image(imgWidth, imgHeight);
          preview.src = canvas.toDataURL("image/jpeg", 1.0);
          funct.setImage(preview.src);
        };
      };
    };

    const imageLoader = document.getElementById("image_loader");
    imageLoader.addEventListener("change", handleImage, false);
    imageLoader.click();
  };

  const handleNameValidation = (e) => {
    if (e.target.value.match(/[^0-9A-Z a-z]/gi)) {
      e.target.value = e.target.value.replace(/[^0-9A-Z a-z]/gi, "");
    }
  };

  const handleEmailOnBlurValidation = (e) => {
    const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,})$/;

    if (!e.target.value.match(reg) && e.target.value != "") {
      funct.setErrors("Ошибка! Введите правильный email.");
      return false;
    }

    const checkingMailOriginality = async () => {
      axios.post(`/check`, {}).then((res) => {
        if (res.data !== 0) {
          funct.setErrors("Вы уже комментировали. Допустим только один отзыв!");
        } else {
          funct.setMail(data);
        }
      });
    };
    // checkingMailOriginality();
  };

  const handleHomePageValidation = (e) => {
    e.target.value = e.target.value
      .toLowerCase()
      .replace("https://", "")
      .replace("http://", "");
  };

  const handleFeedbackSend = async (e) => {
    e.preventDefault();

    if (!data.name || !data.mail || !data.feedback || data.errors) {
      return;
    }

    const feedbackData = {
      name: data.name,
      mail: data.mail,
      page: data.homePage,
      feedback: data.feedback,
      image: data.image
    };

    const path = "/add";

    const response = await fetch(path, {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8"
      },
      body: JSON.stringify(feedbackData)
    });

    const result = await response.text();
    document.location.href = "/";
  };

  const handleEmailOnInput = (e) => {
    e.target.value = e.target.value.toLowerCase();
    if (e.target.value.match(/[^@0-9a-z-\.]/gi)) {
      e.target.value = e.target.value.replace(/[^@0-9a-z-\.]/gi, "");
    }
  };

  return (
    <div className="feedbackForm" key="formKey4">
      <form onSubmit={handleFeedbackSend} key="formKey3">
        <h2>Мой комментарий:</h2>

        <i
          id="closeForm"
          className="material-icons closeForm"
          onClick={() => funct.setShowComponent("startButton")}
        >
          clear
        </i>

        <div className="error">{data.errors}</div>

        <span className="formContainer" key="formKey1">
          <label key="lKey1">
            Имя (на английском):
            <input
              key="key1"
              name="name"
              type="text"
              maxLength="40"
              required
              placeholder="e.g. Piter"
              defaultValue={data.name}
              onInput={(e) => {
                handleNameValidation(e);
                funct.setName(e.target.value);
              }}
            />
          </label>

          <label key="lKey2">
            E-mail:
            <input
              key="key2"
              id="email"
              name="mail"
              type="text"
              required
              maxLength="40"
              placeholder="mail@example.com"
              defaultValue={data.mail}
              onInput={(e) => {
                handleEmailOnInput(e);
                funct.setErrors("");
              }}
              onBlur={(e) => {
                funct.setMail(e.target.value);
                handleEmailOnBlurValidation(e);
              }}
            />
          </label>

          <label key="lKey3">
            Моя домашняя страница:
            <input
              key="key3"
              name="page"
              type="text"
              maxLength="100"
              placeholder="example.com"
              defaultValue={data.homePage}
              onInput={handleHomePageValidation}
              onBlur={(e) => funct.setHomePage(e.target.value)}
            />
          </label>
        </span>

        <label key="lKey4">
          Текст комментария:
          <textarea
            key="key4"
            className="textareaForm"
            maxLength="800"
            required
            defaultValue={data.feedback}
            onBlur={(e) => funct.setFeedback(e.target.value)}
          ></textarea>
        </label>

        <span className="formContainer" key="formKey2">
          <input key="key5" id="image_loader" type="file" hidden />

          <input
            key="key6"
            id="upload"
            type="button"
            className="buttonSubmit"
            defaultValue={data.buttonValue}
            onClick={HandleImageUpload}
          />

          <input
            key="key7"
            type="button"
            className="buttonSubmit"
            defaultValue="Предварительный просмотр"
            onClick={() => funct.setShowComponent("preview")}
          />

          <input
            key="key8"
            id="feedback_send"
            type="submit"
            className="buttonSubmit"
            defaultValue="Опубликовать"
          />
        </span>
      </form>
    </div>
  );
}

export default Form;
reactjs
Martin Hope
118_64
Asked: 2021-10-28 02:53:54 +0000 UTC
  • 0

有一个带有文件的目录files/default.txt。

该文件是从链接从服务器（在我的情况下为本地主机）下载的<a href="/files/default.txt" download>readme</a>

我正在尝试使用任何目录访问权限.htaccess加载default.txt文件，包括不存在的文件名，例如readme.txt：

.htaccess

RewriteEngine On
RedirectMatch "files/(.*\.txt)$" "http://localhost/files/$1"

我收到下载错误：Ошибка: Ошибка сети.

请告诉我需要修复什么以及为什么会出现错误。

php
Martin Hope
118_64
Asked: 2021-10-23 04:19:52 +0000 UTC
  • 1

有一个从服务器返回数据的ajax请求并且有效：

$('#add').on('click', function() {            
  $.ajax({
    type: "POST",
    url: '/add-category',                 
    success: onAddSuccess,
  });

  function onAddSuccess(data) {
    response = data;
  }
}

我正在尝试用fetch请求重写它：

$('#add').on('click', function() { 
  let response = fetch('/add-category');
  let result = response;
}

并得到

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Response
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost/add-category"
__proto__: Response

但是没有数据。请告知如何获得它们？

Yii2，Windows 10

javascript
Martin Hope
118_64
Asked: 2021-10-13 16:46:07 +0000 UTC
  • 0

Yii2、多行更新：

    $sql = 'UPDATE category SET 
        parent = CASE id 
            WHEN 1 THEN 0 
            WHEN 2 THEN 1 
            ELSE parent 
        END, 
        title = CASE id 
            WHEN 1 THEN "строка 1" 
            WHEN 2 THEN "строка 2" 
            ELSE title 
        END
        WHERE id IN (1, 2)
        AND user_id = 15';

    Yii::$app->db->createCommand($sql)
        ->execute();

任务是制作binding参数。在许多文档示例中，我看到了选择查询的绑定方法，而不是更新查询的单个方法/示例。

来自客户端的数据以 JSON 对象数组的形式出现[{"id":1,"user_id":15,"parent":0,"title":"строка"},{"id":2,"user_id":15,"parent":1,"title":"строка 1"}]，MySql 版本为 8.0.18.0

控制器：

public function actionSaveCategory()
{
    if (Yii::$app->request->isAjax) {
        $request = Yii::$app->request->post('categories');           
        
        $categories = json_decode($request, true);
        $model = new Category;
        $rows = [];

        foreach ($categories as $category) {
            $model->load($category, '');
            $model->id = $category['id'];

            if (!$model->validate()) {
                return 'error';
            }

            $rows[] = $model->attributes;
    };
}

我知道 的存在batchInsert ... ON DUPLICATE KEY UPDATE，但是这里的数据来自客户端，我需要进行检查：AND user_id = 15

我征求意见，是否可以对update进行绑定，以及如何进行。

sql
Martin Hope
118_64
Asked: 2020-09-12 16:32:51 +0000 UTC
  • 0

我无法将数据写入表，我收到错误：

SQLSTATE[HY000]: General error: 1364 Field 'user_id' doesn't have a default value
The SQL being executed was: INSERT INTO `contact` (`id`) VALUES (DEFAULT)
Error Info: Array
(
    [0] => HY000
    [1] => 1364
    [2] => Field 'user_id' doesn't have a default value
)

控制器：

$model = new ContactForm();
$model->id = 0;
$model->user_id = Yii::$app->user->id;
$model->save(false);

模型（禁用验证规则）：

class ContactForm extends \yii\db\ActiveRecord
{
  public $id;
  public $user_id;
  //...
}

var_dump：

object(app\models\ContactForm)#214 (12) { ["id"]=> int(0) ["user_id"]=> int(4) ["_attributes":"yii\db\BaseActiveRecord":private]=> array(0) { } ["_oldAttributes":"yii\db\BaseActiveRecord":private]=> NULL ["_related":"yii\db\BaseActiveRecord":private]=> array(0) { } ["_relationsDependencies":"yii\db\BaseActiveRecord":private]=> array(0) { } ["_errors":"yii\base\Model":private]=> NULL ["_validators":"yii\base\Model":private]=> NULL ["_scenario":"yii\base\Model":private]=> string(7) "default" ["_events":"yii\base\Component":private]=> array(0) { } ["_eventWildcards":"yii\base\Component":private]=> array(0) { } ["_behaviors":"yii\base\Component":private]=> array(0) { } }

表格：用户和联系表格

$this->createTable('user', [
  'id' => $this->primaryKey(),
  //...
], $tableOptions);

和

$this->createTable('{{%contact}}', [
  'id' => $this->primaryKey(),
  'user_id' => $this->integer(11)->notNull(),
  //...
], $tableOptions);


$this->createIndex(
  'idx-contact-user_id',
  'contact',
  'user_id'
);


$this->addForeignKey(
  'fk-contact-user_id',
  'contact',
  'user_id',
  'user',
  'id',
  'CASCADE'
);

在这种情况下，手动通过phpMyAdmin进行输入。

问题的原因可能是什么？

mysql
Martin Hope
118_64
Asked: 2020-07-21 17:35:07 +0000 UTC
  • 3

我正在学习 React，我注意到后者child-компонент覆盖了前一个。

就我而言，在 render 之后，它<Feedback />存在于 DOM 中，但<Header />不存在。

我找不到这种行为的原因的描述，你能告诉我如何解决它，它是在哪里描述的？

function Header(props) {
  return (
    <header>
      <h1>{props.text}</h1>
    </header>
  );
}

function Feedback() {
  return (
    <ul></ul>
  );
}

function App() {
  return(
    <Header text="Отзывы" />,
    <Feedback />
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
javascript
Martin Hope
118_64
Asked: 2020-07-01 17:06:52 +0000 UTC
  • 0

系统：Yii2, Windows 10。

音频文件上传验证规则：

public function rules()
{
    return [
        [['audioFile'], 'file', 'extensions' => 'mp3, m4a', 'skipOnEmpty' => false],
    ];
}

public function upload()
{
    if ($this->validate()) {
        $this->audioFile->saveAs('m_upload/audio/' . $this->audioFile->baseName . '.' . $this->audioFile->extension);
        return true;
    } else {
        return false;
    }
}

我注意到有些 mp3 文件经过验证并上传到服务器，有些没有通过。在第二种情况下，我没有在表单中收到错误，页面只是重新加载。

由于删除 check 参数消除了extensions“不上传”文件到服务器的问题，我得出的结论是，原因与特定的 mp3 文件和/或检查它们有关。

因此，验证有效，当设置为extensions任意值时，例如，aaamp3表单会发出有关不适当文件格式的通知。

假设文件以某种方式损坏并且没有通过验证（尽管音频播放器正确处理它们），但为什么没有发生错误呢？谁能建议这种行为的原因是什么？

yii2
Martin Hope
118_64
Asked: 2020-06-17 19:16:09 +0000 UTC
  • 0

有一个页面view，其代码包含在 中Pjax，在 下运行Yii2。该脚本已添加到页面js中。我发现了 js 代码的一个有趣的特性：它可以正常工作，但是如果您返回到您离开的页面（或者通过单击或返回上一页），则 js 代码将停止工作。

<?php Pjax::begin(); ?>
   // some code
<?php Pjax::end(); ?>

<?php
 $js = '$(function(){alert(123);})';
 $this->registerJs($js, $this::POS_END);
?>

行为是可预测的 - DOM 正在重建，但我找不到解决重新安装 js 处理程序问题的方法，或者以保留其性能的方式安装它们。

请告知是否可以解决此问题。

javascript
Martin Hope
118_64
Asked: 2020-06-08 03:58:39 +0000 UTC
  • 2

我正在使用 Visual Studio Code 学习 Git。

通过单击 Visual Studio Code 中的 Source Control 选项卡登录到我的GitLab帐户。同时，请求了登录名和密码，之后我就可以使用远程存储库了。

我正在尝试在 GitLab 上克隆另一个存储库，我可以通过登录名和密码访问该存储库。在对话框中我输入https://gitlab.com/myproject/myproject.git，以及个人访问令牌和 url https://gitlab.com

我没有收到第二次对我的 GitLab 帐户的登录名和密码的请求，我在终端中读到：

> git clone https://gitlab.com/myproject/myproject.git e:\work\myproject --progress
Cloning into 'e:\work\myproject'...
remote: The project you were looking for could not be found.
fatal: repository 'https://gitlab.com/myproject/myproject.git/' not found

Visual Studio Code 中的 GitLab 登录名和密码在哪里更改，可以重置吗？如果我没记错的话，问题出在身份验证上。我就如何解决它寻求帮助和建议。

git
Martin Hope
118_64
Asked: 2020-03-13 18:37:13 +0000 UTC
  • 0

当我尝试访问数据库时，出现以下错误：

照亮\数据库\查询异常

SQLSTATE[HY000] [2054] 服务器请求客户端未知的身份验证方法（SQL：select * from users where id = :id）

我寻求建议：问题是什么以及如何解决？


  • 系统：Windows 10
  • MySQL：8.0
  • PHP：7.4.1
  • 拉拉维尔：5.0.1
  • 扩展=pdo_mysql
  • [mysqld] 默认身份验证插件=mysql_native_password


namespace App\Http\Controllers;
use Illuminate\Support\Facades\DB;
use App\Http\Controllers\Controller;

class TestController extends Controller
{
    public function getUsers()
    {
        $results = DB::select('select * from users where id = :id', ['id' => 1]);
    }
}


配置文件

<?php
  $i = 0;
  $i++;
  $cfg['Servers'][$i]['host'] = 'localhost';
  $cfg['Servers'][$i]['extension'] = 'mysqli';
  $cfg['Servers'][$i]['connect_type'] = 'tcp';
  $cfg['Servers'][$i]['compress'] = false;
  $cfg['Servers'][$i]['auth_type'] = 'config';
  $cfg['Servers'][$i]['user'] = 'root';
  $cfg['Servers'][$i]['password'] = '1234'; 
?>


数据库.php

'default' => env('DB_CONNECTION', 'mysql'),

'connections' => [

    'mysql' => [
        'driver' => 'mysql',
        'url' => env('DATABASE_URL'),
        'host' => env('DB_HOST', '127.0.0.1'),
        'port' => env('DB_PORT', '3306'),
        'database' => env('shop', 'forge'),
        'username' => env('root', 'forge'),
        'password' => env('1234', ''),
        'unix_socket' => env('DB_SOCKET', ''),
        'charset' => 'utf8mb4',
        'collation' => 'utf8mb4_unicode_ci',
        'prefix' => '',
        'prefix_indexes' => true,
        'strict' => true,
        'engine' => null,
        'options' => extension_loaded('pdo_mysql') ? array_filter([
            PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
        ]) : [],
    ],
],


.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=shop
DB_USERNAME=root
DB_PASSWORD=1234
php
Martin Hope
118_64
Asked: 2020-07-18 19:14:41 +0000 UTC
  • 1

我在网站上安装了一个按钮（html 链接）以在 Viber 中开始聊天：

选项编号 1

<a href="viber://chat?number=+387771234567"><i class="fab fa-viber"></i>Viber</a>

如果您单击viber://chat?number=+计算机上的链接，viber 应用程序将启动，并与电话号码的所有者打开对话。问题：点击此链接不会被安装在智能手机上的 viber 应用程序拦截。

选项编号 2

<a href="viber://add?number=387771234567"><i class="fab fa-viber"></i>Viber</a>

如果您单击链接（链接行中没有+viber://add?number=符号），智能手机上的应用程序会添加联系人（开始聊天是一个单独的用户操作，他仍然需要自己执行），但这链接被安装在桌面上的应用程序错误地截获，从而给出错误“无法执行操作”。

技术方案是通过HTTP_USER_AGENT检查设备，并据此生成html链接的字符串。

请告诉我这是否是正确的方法，或者是否有用于为智能手机和台式机创建和处理链接的通用解决方案？

html
Martin Hope
118_64
Asked: 2020-06-26 18:11:34 +0000 UTC
  • 0

sql 查询中有一个任务是使用变量作为值ORDER BY。

我知道列名和表名不能“绑定”。

$sort当将具有硬编码值选项的变量插入查询字符串时，我就构造的安全性征求意见，例如：

 if ($_POST['sort'] == "DESC") {
    $sort = "`title` DESC" ;
 } else {
    $sort = "`price`" ;
 }

 $sql = "SELECT * FROM `table` 
         WHERE `id` = ? 
         ORDER BY " . $sort . " 
         LIMIT ?,?      
        " ;

 $stmt = $pdo->prepare($sql);   
 $stmt->execute(...

一个更广泛的问题是将部分查询放入变量中的做法有多糟糕（或可接受），如下所示：

if ($_POST['column'] == "1") {
   $var_sql_str = " AND `column` = '' " ;      
} else {
   $var_sql_str = "" ;      
}

$sql = "SELECT * FROM `table` 
        WHERE `id` = ? 
        " . $var_sql_str . "
        ORDER BY " . $sort . " 
        LIMIT ?,?      
       " ;    

$stmt = $pdo->prepare($sql);   
$stmt->execute(...
php
Martin Hope
118_64
Asked: 2020-05-06 23:43:56 +0000 UTC
  • 1
function getRes(a,b) {                          
  $.ajax({
   type: "post",
   url: url,
   data: {val1: a, val2: b},                   
     success: function(data) {
       return data;
     }                                                                               
  });
}

(async function() {
 var res = await getRes(2,3);
   console.log(res); // undefined
 })();

设定的目标——实现getRes()不同部分代码的多次使用没有实现，结果是undefined. 请告知我做错了什么以及如何解决它。

javascript
Martin Hope
118_64
Asked: 2020-01-09 20:55:09 +0000 UTC
  • 0

为了重用，我在一个单独的函数中取出了 ajax 请求：

function getProducts(a,b) {                          
  $.ajax({
   type: "POST",
   url: url,
   data: {cat: a, subcat: b},                   
     success: function(data) {
       return data;
     },       
     async: false                                                                                 
  });
}

var list = getProducts(10,20);
console.log(list); // undefined

函数调用会产生undefined，即使data函数内部已定义。据我了解，问题是异步的，尽管它已明确说明async: false。

请您告诉我如何正确使用外部函数形式的ajax请求。

javascript
Martin Hope
118_64
Asked: 2020-11-23 19:18:32 +0000 UTC
  • 0

代码示例：

UPDATE tbl_country SET price = CASE
WHEN code = 1 THEN 123;
WHEN code = 2 THEN 456;
…
END
WHERE code IN (1,2,…)
AND id = 222

一个常见的建议是不要使用此类构造，因为它们效率低下，而是通过事务命令集中的单个命令进行更新，例如，here。

请解释列出用逗号分隔的连续更新是否更有效，例如，像这样：

$query = 
 "UPDATE tbl_country SET price = 123 WHERE code = 1 AND id = 222;
  UPDATE tbl_country SET price = 456 WHERE code = 2 AND id = 222;
  ...
 ";

升级版：

关于性能问题的答案就是这个话题，特别是这个答案。

php
Martin Hope
118_64
Asked: 2020-09-05 16:02:59 +0000 UTC
  • 0
$(".img_list").on("click", "li", function() {
  var li = $(this); 
  $("#loader").click();

  $(document).on('response', function(e, data) {
   var data = '<img src="/img/' + data.filename + '/>';
   li.html(data);
  });
});

单击列表中的项目li会将图像加载到其中。

问题：当将第二个（第三个等）图像加载到列表的下一个元素中时，之前加载的所有图像都被li分配了相同的地址src，即 而不是不同元素中的不同图像，而是li随处显示一张图像，最后一张加载。

尝试引用id列表的元素，分配一个data.filename变量，导致null每次添加图像后，都没有解决问题。

请告知如何正确执行。

jquery
Martin Hope
118_64
Asked: 2020-03-29 01:06:08 +0000 UTC
  • 0

有一个基于列表项的菜单，其中最后一个有一个搜索字段。列表项（更准确地说是其中的文本）可以占据不同的宽度。

任务是确保带有输入表单的列表的最后一个元素占据分配给菜单的所有剩余空间。

.menu {
  height: 45px;
  width: 800px;
  position: absolute;
  top: 200px;
  left: 100px;
}

.menu ul {
  display: inline-block;
  width: auto;
  margin: auto;
}

.menu li:not(:last-child) {
  display: inline-block;
  width: auto;
}

.menu li.last {
  display: inline-block;
  margin: auto;
  width: 100%;
  /* происходит перенос элемента на следующую строку */
}

.menu a {
  height: 45px;
  padding: 0px 20px;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

.form {
  display: inline-block;
  height: 38px;
  width: 100%;
}

.input {
  display: inline;
  width: 84%;
  /*  смещение под кнопку .button  */
  height: 100%;
}

.button {
  position: relative;
  left: -14%;
  width: 12%;
  height: 90%;
}
<div class="menu">
  <ul>
    <li><a href="/">Text 1</a></li>
    <li><a href="/2">Text_2</a></li>
    <li><a href="/3">Text_123</a></li>
    <li class="last">
      <form class="form">
        <input class="input" type="text"><input class="button" type="submit" value="&#128269;">
      </form>
    </li>
  </ul>
</div>

我以不同的方式排列它，尝试使用 flex，将输入表单移到列表之外，但结果是两件事之一：要么最后一个元素没有占用所有剩余空间，要么它换行到下一行。

请就解决此问题需要采取的措施提出建议。

html