dilongzuyj 2024-02-02 17:58 采纳率: 75%
浏览 8
已结题

我在用html时的一个奇怪的问题

为什么这是不是一排而是一列呢
还有，它们应该在灰框旁边啊
其实，我用这个单纯是为了更快建造一个function

<!DOCTYPE html>
<html>
<head>
</haed>
<body>
<div class="agent"style="position:relative;">
<span class="text"style="position:absolute;top:30px;"></span>
<div class="button1"></div>
<div class="button2"></div>
</div>
<script>
//funtion(text, size, l){
var size = 500;
var l = "250px";
var b1 = document.getElementsByClassName("button1")[0], b2 = document.getElementsByClassName("button2")[0];
var agent = document.getElementsByClassName("agent")[0];
var txt = document.getElementsByClassName("text")[0];
function setSize(who, size, wb, hb){
  who.style.width =(size / 2 * wb)+ "px";
  who.style.height =(size / 2 * hb)+ "px";
}
setSize(agent, size, 2, 1);
agent.style.backgroundColor = "grey";
agent.style.left = l;
txt.innerHTML = "text";
var x = l +(size / 2);
b1.setAttribute("style", `position:relative;`);
b2.setAttribute("style", `position:relative;`);
b1.style.left = `${x}px`;
b2.style.left = `${x + size}px`;
b1.style.top = `${size}px`;
b2.style.top = `${size}px`;
var os = size / 2;
setSize(b1, os, 2, 1);
setSize(b2, os, 2, 1);
b1.style.backgroundColor = "#555";
b2.style.backgroundColor = "#555";
//}
</script>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-02-02 18:00
    关注

    引自免费微信小程序：皆我百晓生

    根据您提供的代码片段，问题在于按钮 .button1 和 .button2 的布局并未按预期排成一行。这是因为尽管您设置了它们的 left 属性，但它们的 position 属性被设置为了 relative，这意味着相对于它们原本在文档流中的位置进行定位。

    要让这两个按钮显示在一排且位于灰色框（.agent）旁边，首先需要确保 .button1 和 .button2 都是绝对定位，并且 .agent 是一个相对定位的容器，以便按钮可以根据它来确定位置。以下是修改后的代码：

    <!DOCTYPE html>
<html>
<head>
<style>
  .agent {
    position: relative;
    width: 500px; /* 假设 agent 的总宽度 */
    height: 300px; /* 假设 agent 的总高度 */
    background-color: grey;
    left: 250px;
  }
  
  .text {
    position: absolute;
    top: 30px;
  }
  
  .button1, .button2 {
    position: absolute;
    width: calc(50% - 2px); /* 让两个按钮之间有缝隙 */
    height: calc(50% - 2px);
    background-color: #555;
    border-radius: 4px; /* 可选，添加圆角效果 */
  }
</style>
</head>
<body>
<div class="agent">
  <span class="text"></span>
  <div class="button1"></div>
  <div class="button2"></div>
</div>
<script>
// function(text, size, l){
var size = 500;
var l = "250px";
var b1 = document.getElementsByClassName("button1")[0], 
    b2 = document.getElementsByClassName("button2")[0];
var txt = document.getElementsByClassName("text")[0];

txt.innerHTML = "text";

b1.style.left = '0'; // 设置 button1 在 agent 左侧边缘
b1.style.top = `${size}px`; // 设置 button1 在 agent 下方

b2.style.left = 'calc(50% + 1px)'; // 设置 button2 在 agent 中点右侧，留出缝隙
b2.style.top = `${size}px`; // 设置 button2 在 agent 下方

// 如果需要动态设置大小，可以保留 setSize 函数并调用
//setSize(b1, os, 2, 1);
//setSize(b2, os, 2, 1);
</script>
</body>
</html>

    这段代码中：

    1. 我将样式部分移动到了 <style> 标签内，以便更好地控制页面元素的样式。
    2. 将按钮的 position 设为 absolute 并调整其 left 和 top 属性值，使它们排列在一排。
    3. 使用 CSS calc() 函数计算按钮的位置和大小，以适应不同的尺寸需求。

    现在，.button1 和 .button2 应该会按照预期在一排显示，并且都在 .agent 灰色框旁边了。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 2月10日
  • 已采纳回答 2月2日
  • 创建了问题 2月2日

悬赏问题

  • ¥15 poi合并多个word成一个新word,原word中横版没了.
  • ¥15 【火车头采集器】搜狐娱乐这种列表页网址，怎么采集？
  • ¥15 求MCSCANX 帮助
  • ¥15 机器学习训练相关模型
  • ¥15 Todesk 远程写代码 anaconda jupyter python3
  • ¥15 我的R语言提示去除连锁不平衡时clump_data报错，图片以下所示，卡了好几天了，苦恼不知道如何解决，有人帮我看看怎么解决吗？
  • ¥15 在获取boss直聘的聊天的时候只能获取到前40条聊天数据
  • ¥20 关于URL获取的参数，无法执行二选一查询
  • ¥15 液位控制，当液位超过高限时常开触点59闭合，直到液位低于低限时，断开
  • ¥15 marlin编译错误，如何解决？