html容器为啥不能左右滑动

hu947177386 · 发表于 2024-3-27 15:12:36

代码如下，新建按钮数量多的情况下，只会在容器里越来越小，不会让容器左右滑动，问了ai半天都没给出正确的答案，求大佬帮忙看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>图片预览</title>
<style>
      body {
         background-image: url('/pic/4.jpeg');
         background-size: cover;
         background-repeat: no-repeat;
         background-attachment: fixed;
         overflow-y: auto;
         overflow-x: hidden;
      }
.container {
display: flex;
align-items: flex-start;
width: 100%;
height: 100%;
overflow-x: auto;
white-space: nowrap;
border: 1px solid black;
border-radius: 12px; /* 这里设置圆角半径 */
}

.button {
display: inline-block;
margin-right: 10px;
width: 100px; /* 设置按钮宽度 */
height: 200px; /* 设置按钮高度 */
background-color: #4CAF50;
background-size: cover;
background-position: center;
border: none;
color: white;
padding: 15px auto;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px; /* 这里设置圆角半径 */
}

/* 隐藏默认的模态框 */
.modal {
display: none;
z-index: 10001;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}

/* 模态框内容 */
.modal-content {
display: flex;
z-index: 10000;

flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius: 10px; /* 添加圆角 */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* 添加阴影 */
}
.modal button:hover {
background-color: #45a049;
}
.modal button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
border-radius: 5px; /* 添加圆角 */
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<button class="button">上传图片</button>
</div>

<div id="xzModal" class="modal">
  <div class="modal-content">
<label for="dhjfye">请选择要执行的操作</label>
<br>
<button>重新上传</button>
<button>删除图片</button>
<button>返回</button>
  </div>
</div>

<script>
var duiyingan;

function cxsc() {
xzcloseModal();
uploadImage(duiyingan);
}

function pdpicsf(button) {
duiyingan = button;
if (button.style.backgroundImage === "") {
   uploadImage(button);
}else {
   xzopendhModal();
}
}

function uploadImage(button) {
      var input = document.createElement("input");
      input.type = "file";
      input.accept = "image/*";
      input.onchange = function() {
         var file = this.files[0];
         var reader = new FileReader();
         reader.onload = function() {
            if (button.style.backgroundImage === ""){
                  button.style.backgroundImage = "url(" + reader.result + ")";
                  button.innerText = ''; // 添加这行代码来改变按钮的文本
                  createNewButton(button);
            }else{
                  button.style.backgroundImage = "url(" + reader.result + ")";
                  button.innerText = ''; // 添加这行代码来改变按钮的文本
            }
         };
         reader.readAsDataURL(file);
      };
      input.click();
}

function createNewButton(button) {
const newButton = document.createElement('button');
newButton.innerText = '上传图片';
newButton.className = 'button';
newButton.onclick = function() {
      pdpicsf(newButton);
};
button.parentNode.insertBefore(newButton, button.nextSibling);
}

function sctp() {
xzcloseModal();
duiyingan.remove();
}

function xzopendhModal() {
var xzmodal = document.getElementById("xzModal");
xzmodal.style.display = "block";
xzmodal.style.animationName = "fadeIn";
xzmodal.style.animationDuration = "1s";
}

function xzcloseModal() {
var xzmodal = document.getElementById("xzModal");
xzmodal.style.display = "none";
}
</script>
</body>
</html>

雨落无声 · 发表于 2024-3-27 15:12:37

父容器是flex，试试按钮添加样式flex-shrink！

[CSS] 纯文本查看 复制代码

flex-shrink: 0;

frankiy · 发表于 2024-3-27 15:26:27

width=device-width ，定义了区域宽度随设备，那么页面就会自动缩放。你这里可以定义一个固定宽度，就会有左右滚动条了

hu947177386 · 发表于 2024-3-27 15:31:36

frankiy 发表于 2024-3-27 15:26
width=device-width ，定义了区域宽度随设备，那么页面就会自动缩放。你这里可以定义一个固定宽度，就会 ...

但是奇怪的是这段代码就可以，我始终没看出来差别
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
align-items: flex-start;
width: 100%;
height: 100%;
overflow-x: auto;
white-space: nowrap;
border: 1px solid black;
border-radius: 12px; /* 这里设置圆角半径 */
}

.button {
display: inline-block;
margin-right: 10px;
width: 100px; /* 设置按钮宽度 */
height: 200px; /* 设置按钮高度 */
background-color: #4CAF50;
background-size: cover;
background-position: center;
border: none;
color: white;
padding: 15px auto;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px; /* 这里设置圆角半径 */
}
</style>
</head>
<body>
<div class="container">
<button class="button" onclick="uploadImage(this)" onmousedown="startLongPress(this)" onmouseup="endLongPress()">上传图片</button>
</div>

<script>
function uploadImage(button) {
var input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function() {
if (button.style.backgroundImage === "") {
button.style.backgroundImage = "url(" + reader.result + ")";
button.innerText = '点击重新上传\n长按删除此图'; // 添加这行代码来改变按钮的文本
createNewButton(button);
} else {
button.style.backgroundImage = "url(" + reader.result + ")";
button.innerText = '点击重新上传\n长按删除此图'; // 添加这行代码来改变按钮的文本
}
};
reader.readAsDataURL(file);
};
input.click();
}

function createNewButton(button) {
const newButton = document.createElement('button');
newButton.innerText = '上传图片';
newButton.className = 'button';
newButton.onclick = function() {
uploadImage(newButton);
};
newButton.onmousedown = function() {
startLongPress(newButton);
};
newButton.onmouseup = function() {
endLongPress();
};
button.parentNode.insertBefore(newButton, button.nextSibling);
}

let timer;
var targetElement;

function startLongPress(element) {
if (event.target.style.backgroundImage !== "") { // 检查背景图片是否为空
timer = setTimeout(showTooltip, 1000); // 设置延时为1000毫秒（1秒）
targetElement = element;
}
}

function endLongPress() {
clearTimeout(timer); // 清除定时器
}

function showTooltip() {
targetElement.remove();
}

// 新增的代码
async function uploadImageAndFetchUrl(button) {
  var input = document.createElement("input");
  input.type = "file";
  input.accept = "image/*";
  input.onchange = async function () {
var file = this.files[0];
var formData = new FormData();
formData.append("image", file);

try {
   const response = await fetch("YOUR_API_ENDPOINT", {
      method: "POST",
      body: formData,
   });

   if (response.ok) {
      const jsonResponse = await response.json();
      const imageUrl = jsonResponse.imageUrl; // 假设返回的JSON数据中包含名为imageUrl的字段
      console.log("图片URL:", imageUrl);
   } else {
      console.error("上传失败");
   }
} catch (error) {
   console.error("上传过程中出现错误：", error);
}
  };
  input.click();
}
</script>
</body>
</html>

hu947177386 · 发表于 2024-3-27 15:32:45

frankiy 发表于 2024-3-27 15:26
width=device-width ，定义了区域宽度随设备，那么页面就会自动缩放。你这里可以定义一个固定宽度，就会 ...

哦，我看到了你说的，是顶部设备那里width=device-width，有没有其他解决办法。。。一定得定义固定宽度吗

frankiy · 发表于 2024-3-27 15:35:22

hu947177386 发表于 2024-3-27 15:32
哦，我看到了你说的，是顶部设备那里width=device-width，有没有其他解决办法。。。一定得定义固定宽度吗 ...

还可以用CSS表解决。但是我不会。

hu947177386 · 发表于 2024-3-27 15:37:51

frankiy 发表于 2024-3-27 15:35
还可以用CSS表解决。但是我不会。

hu947177386 · 发表于 2024-3-27 15:39:02

frankiy 发表于 2024-3-27 15:35
还可以用CSS表解决。但是我不会。

我问了ai问了半天，每次回答的都是css里我已经写了的代码，我也是无语了

FanLi · 发表于 2024-3-27 15:41:57

可以的，得设置一下下才行。设置宽度大于屏幕就好了

frankiy · 发表于 2024-3-27 15:43:25

hu947177386 发表于 2024-3-27 15:39
我问了ai问了半天，每次回答的都是css里我已经写了的代码，我也是无语了

你的确可以自己在CSS里设置展示容器的大小啊。你的代码里也定义了，其实有很多办法可以弄。

display: flex;
align-items: flex-start;
width: 100%; 定义容器宽度
height: 100%;

		自动登录	找回密码
密码			注册

[已解决] html容器为啥不能左右滑动

最佳答案