javascript - 在创建的 div 中的文本旁边放置一个按钮

标签 javascript jquery html css

当我创建一个 div 时，我想将我的按钮放置在文本的右侧。当我只输入一些像“PHP”这样的文本时它工作正常但是当写一个像“Javascript”这样的更长的词时按钮向下移动所以它在文本下面。我试过使用 float 和显示，但它似乎不起作用。关于如何执行此操作的任何想法？

$(document).ready(() => {
    //You can use IDs here because these elements are unique
    const $addBtn = $("#läggatill");
    const $inputBox = $("#myText");
    const $flexBox = $("#flexbox");

    $addBtn.click(() => {
        //Creating a new box that contains everything we need and saving it to a variable
        //I'm using ES6 template strings to embed the value of $inputBox
        const $box = $(`
        <div class="box">
                <div class="newrect">
                ${$inputBox.val()}
            <button class="hej">X</button></div>
            <div class="dropdown">
                <p class="text" id="text">Add description</p>
            <textarea maxlength="255" class="autoExpand"></textarea>
            </div>
        </div>
        `);
        //Adding event listeneres for the box elements
        $box.find(".hej").click(function () {
            //Removing the parent .box wrapper DIV
            $(this).closest(".box").remove();
        });
        $box.find(".newrect").click(() => {
            const $dropdown = $box.find(".dropdown");
            //If the dropdown is invisible, show it. Otherwise, hide it
            if ($dropdown.css("display") === "none") {
                $box.find(".dropdown").show();
            } else {
                $box.find(".dropdown").hide();
            }
        });

        //Appending the box to the flexBox
        $box.appendTo($flexBox);
    });
});

// Expands all textareas with the class autoExpand
$(document)
    .one('focus.autoExpand', 'textarea.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.autoExpand', 'textarea.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0, rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });
/* Start of lägga till kompetens */
  
.newrect {
    min-width: 105px;
    max-width: 220px;
    margin-top: 1%;
    margin-right: 1%;
    margin-left: 1%;
    margin-bottom: 0%;
    padding: 5px 10px 5px 10px;
    border: 1px solid green;
    border-radius: 40px;
    text-align: center;
    background-color: white;
    z-index: 2;
    cursor: pointer;
  }
  
  .flexbox{
    display: flex;
    flex-direction: row;
  }

  .box {
    z-index: 1;
  }
  
  .skriv {
    border-radius: 40px 40px 40px 40px;
    outline: none;
    padding: 0 2%;
    width: 51%; 
    margin: 2%;
  }
  
  .läggatill {
    border: 1px solid black;
    background-color: white;
    border-radius: 5px 5px 5px 5px;
    outline: none;
    margin: 2% 5%;
    width: 23%;
    max-width: 200px;
    float: right;
  }
  
  .dropdown {
    display: none; 
    background-color: darkgrey;
    height: 400px;
    margin-top: -20%;
    margin-right: 0%;
    margin-left: 1.5%;
    margin-bottom: 0%;
    z-index: -1;
    padding-top: 10%;
    width: 97%;
  }
  .dropdown textarea{
    width: 90%;
  }
  
  
  .show { 
    display: block; 
  } 
  
  .hej {
    position: relative;
    border: none;
    background-color: transparent;
    color: darkblue;
  }
  
  .autoExpand {
    margin-top: 0%;
    margin-right: 0%;
    margin-left: 5%;
    margin-bottom: 0%;
    z-index: 2;
    display: block;
    overflow: hidden;
    padding: 10px;
    font-size: 14px;
    border-radius: 6px;
    border: 0;
    resize: none;
  }
  
  .text {
    text-align: center;
    margin-top: 30%;
    cursor: default;
  }
  
  /* End of lägga till kompetens */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css"> <!-- Länk till CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  
</head>
<body>
    
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">  
  <div class="reform">

      <input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus> <!-- Textfield for kompetenser -->
     
      <input id="läggatill" class="läggatill" type="button" value="Add box"> <!-- Button lägga till --> 
 
  </div>  
</div>
      <div class="flexbox" id="flexbox"></div> <!-- Container for the boxes -->

最佳答案

此问题是由于您在 .newrect 上的 CSS 中设置的 max-width 导致内容溢出。同样，margin-left 和 margin-right 侵入了内容，因此 .hej 偶尔也会因此而溢出。

要解决此问题，请从 .newrect 中删除 max-width(或使其多更大)并使用padding 为 .newrect 中的内容设置水平间距:

.newrect {
  min-width: 105px;
  padding; 0 5px 0 15px;
  /* other rules ... */
}


$(document).ready(() => {
  //You can use IDs here because these elements are unique
  const $addBtn = $("#läggatill");
  const $inputBox = $("#myText");
  const $flexBox = $("#flexbox");

  $addBtn.click(() => {
    //Creating a new box that contains everything we need and saving it to a variable
    //I'm using ES6 template strings to embed the value of $inputBox
    const $box = $(`
        <div class="box">
                <div class="newrect">
                ${$inputBox.val()}
            <button class="hej">X</button></div>
            <div class="dropdown">
                <p class="text" id="text">Add description</p>
            <textarea maxlength="255" class="autoExpand"></textarea>
            </div>
        </div>
        `);
    //Adding event listeneres for the box elements
    $box.find(".hej").click(function() {
      //Removing the parent .box wrapper DIV
      $(this).closest(".box").remove();
    });
    $box.find(".newrect").click(() => {
      const $dropdown = $box.find(".dropdown");
      //If the dropdown is invisible, show it. Otherwise, hide it
      if ($dropdown.css("display") === "none") {
        $box.find(".dropdown").show();
      } else {
        $box.find(".dropdown").hide();
      }
    });

    //Appending the box to the flexBox
    $box.appendTo($flexBox);
  });
});

// Expands all textareas with the class autoExpand
$(document)
  .one('focus.autoExpand', 'textarea.autoExpand', function() {
    var savedValue = this.value;
    this.value = '';
    this.baseScrollHeight = this.scrollHeight;
    this.value = savedValue;
  })
  .on('input.autoExpand', 'textarea.autoExpand', function() {
    var minRows = this.getAttribute('data-min-rows') | 0,
      rows;
    this.rows = minRows;
    rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
    this.rows = minRows + rows;
  });
/* Start of lägga till kompetens */

.newrect {
  min-width: 105px;
  margin-top: 1%;
  padding; 0 5px 0 15px;
  margin-bottom: 0%;
  padding: 5px 10px 5px 10px;
  border: 1px solid green;
  border-radius: 40px;
  text-align: center;
  background-color: white;
  z-index: 2;
  cursor: pointer;
}

.flexbox {
  display: flex;
  flex-direction: row;
}

.box {
  z-index: 1;
}

.skriv {
  border-radius: 40px 40px 40px 40px;
  outline: none;
  padding: 0 2%;
  width: 51%;
  margin: 2%;
}

.läggatill {
  border: 1px solid black;
  background-color: white;
  border-radius: 5px 5px 5px 5px;
  outline: none;
  margin: 2% 5%;
  width: 23%;
  max-width: 200px;
  float: right;
}

.dropdown {
  display: none;
  background-color: darkgrey;
  height: 400px;
  margin-top: -20%;
  margin-right: 0%;
  margin-left: 1.5%;
  margin-bottom: 0%;
  z-index: -1;
  padding-top: 10%;
  width: 97%;
}

.dropdown textarea {
  width: 90%;
}

.show {
  display: block;
}

.hej {
  position: relative;
  border: none;
  background-color: transparent;
  color: darkblue;
}

.autoExpand {
  margin-top: 0%;
  margin-right: 0%;
  margin-left: 5%;
  margin-bottom: 0%;
  z-index: 2;
  display: block;
  overflow: hidden;
  padding: 10px;
  font-size: 14px;
  border-radius: 6px;
  border: 0;
  resize: none;
}

.text {
  text-align: center;
  margin-top: 30%;
  cursor: default;
}


/* End of lägga till kompetens */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/test.css">
  <!-- Länk till CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- Bootstrap -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>

  <!-- Start of lägga till kompetenser function -->
  <div class="col-md-12">
    <div class="reform">

      <input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus>
      <!-- Textfield for kompetenser -->

      <input id="läggatill" class="läggatill" type="button" value="Add box">
      <!-- Button lägga till -->

    </div>
  </div>
  <div class="flexbox" id="flexbox"></div>
  <!-- Container for the boxes -->

关于javascript - 在创建的 div 中的文本旁边放置一个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59159424/

上一篇：css - 如何让图像和文本内联显示？

下一篇：CSS级联优先级的起源和重要性

相关文章：

javascript - HighCharts 将总计堆叠在顶部以进行百分比堆叠

javascript - 当按钮位于表单之外时，jQuery 验证不起作用

python - 如何使用 python 从 beautifulsoup 输出中删除所有对齐和缩进？

javascript - 只为一个参数 stub 函数

javascript - 正则表达式在文本中而不是在单词之后找到匹配项

javascript - 根据 Highcharts 中的列值更改数据标签颜色、旋转和对齐值

javascript - 如何向 Bootstrap 日期时间选择器添加秒数

html - IE上的paypal按钮问题

php mysql 选择数据到gridview

javascript - 箭头函数中的 `var` 和 `let` 行为

©2024 IT工具网  联系我们