請你幫我修改，這個爲什麽顯示的輸入框很大，請你幫我縮小并且需要從左向右依次排列 #main { width: 80%; margin: 50px auto; padding: 20px; background-color: #f5f5f5;

要将输入框从左向右依次排列，可以使用 `display: inline-block;` 属性。同时，将宽度设置为较小的值即可缩小输入框。修改后的代码如下：

#main {
  width: 50%;
  margin: 50px auto;
  padding: 20px;
  background-color: #f5f5f5;
}

input[type="text"] {
  display: inline-block;
  width: 30%;
  margin-right: 10px;
}

这样就可以将输入框从左向右排列，并且缩小输入框的大小。

相关问题

请用js 帮我写一个低代码拖拽输入框

好的，以下是一个简单的低代码拖拽输入框的实现，使用了HTML、CSS和JavaScript：

HTML代码：

<div class="input-container">
  <div class="input-label">输入框</div>
  <div class="input-box" id="input-box" contenteditable="true"></div>
</div>
<div class="drag-handle" id="drag-handle"></div>

CSS代码：

.input-container {
  position: relative;
  width: 300px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
}

.input-label {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.input-box {
  width: 100%;
  height: 60px;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px;
  overflow: auto;
}

.drag-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: #ddd;
  cursor: move;
}

JavaScript代码：

const inputContainer = document.querySelector('.input-container');
const dragHandle = document.querySelector('.drag-handle');
let isDragging = false;

dragHandle.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);

function startDrag(e) {
  isDragging = true;
}

function drag(e) {
  if (isDragging) {
    inputContainer.style.left = e.pageX - inputContainer.offsetWidth / 2 + 'px';
    inputContainer.style.top = e.pageY - inputContainer.offsetHeight / 2 + 'px';
  }
}

function endDrag(e) {
  isDragging = false;
}

这段代码实现了一个拖拽输入框的功能，包括输入框本身和一个可拖拽的手柄。当用户按下手柄并移动鼠标时，输入框会跟随鼠标移动。用户释放鼠标后，输入框会停在当前位置。输入框本身是一个可编辑的div元素，可以用来输入文本。

请帮我写一个富文本输入框

好的，以下是一个简单的富文本输入框的实现，可以参考：

<div contenteditable="true"></div>

使用 `contenteditable` 属性可以将一个元素设置为可编辑状态，从而实现富文本输入框的功能。

如果需要更多的富文本编辑功能，可以使用一些第三方插件或库，例如：

- [Quill](https://quilljs.com/)
- [TinyMCE](https://www.tiny.cloud/)
- [CKEditor](https://ckeditor.com/)
- [Summernote](https://summernote.org/)
- [Froala Editor](https://www.froala.com/wysiwyg-editor)

这些插件都提供了丰富的富文本编辑功能，可以根据自己的需求选择使用。