Question

我正在尝试创建两列文本框，它们应该类似于下图：

enter image description here

但它看起来像这样：

enter image description here

我使用了以下代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <title>DHTML with jQuery</title>
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
    <button id="btnStart">start</button>
    <div id="container"></div>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="../js/script.js"></script>
</body>
</html>

来自DOM检查器的

HTML

<html><head>
    <script src="/iScorecard/resources/js/jquery.1.10.2.min.js"></script><style type="text/css"></style>

</head>
<body>
    <button id="btnStart" style="display: none;">start</button>
    <div id="container">
    <input type="text" id="txtPlayerId1" placeholder="player 1">
    <input type="text" id="txtPlayerId11" placeholder="0">
    <input type="text" id="txtPlayerId2" placeholder="player 2">
    <input type="text" id="txtPlayerId12" placeholder="0">
    <input type="text" id="txtPlayerId3" placeholder="player 3">
    <input type="text" id="txtPlayerId13" placeholder="0">
    <input type="text" id="txtPlayerId4" placeholder="player 4">
    <input type="text" id="txtPlayerId14" placeholder="0">
    <input type="text" id="txtPlayerId5" placeholder="player 5">
    <input type="text" id="txtPlayerId15" placeholder="0">
    <input type="text" id="txtPlayerId6" placeholder="player 6">
    <input type="text" id="txtPlayerId16" placeholder="0">
    <input type="text" id="txtPlayerId7" placeholder="player 7">
    <input type="text" id="txtPlayerId17" placeholder="0">
    <input type="text" id="txtPlayerId8" placeholder="player 8">
    <input type="text" id="txtPlayerId18" placeholder="0">
    <input type="text" id="txtPlayerId9" placeholder="player 9">
    <input type="text" id="txtPlayerId19" placeholder="0">
    <input type="text" id="txtPlayerId10" placeholder="player 10">
    <input type="text" id="txtPlayerId110" placeholder="0">
    <input type="text" id="txtPlayerId11" placeholder="player 11">
    <input type="text" id="txtPlayerId111" placeholder="0"></div>

    <script type="text/javascript" src="/iScorecard/resources/js/dataTextBoxes.js"></script>
    <link rel="stylesheet" href="/iScorecard/resources/css/style.css">

</body></html>

JS

    function createTextBoxes(event, txtBoxCount) {
    var iCounter = 0,
        playerText = null,
        scoreText = null;

    for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
        playerText = document.createElement('input');
        scoreText = document.createElement('input');
        $(playerText).attr('type', 'text');
        $(scoreText).attr('type', 'text');
        $(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
        $(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
        $(playerText).attr('placeholder', 'player ' + (iCounter + 1));
        $(scoreText).attr('placeholder', '0');
        $('#container').append(playerText);
        $('#container').append(scoreText);
    }
}

$("#btnStart").on('click', function(event) {
    createTextBoxes(event, 11);
    $("#btnStart").hide();
});

如何修改代码以创建文本框列表，如模型屏幕中所示。

Answer 1

哟可以用css完成这个。我可以给你3个选择。

选项1 - 仅使用css（带内联块）

<style type="text/css">
#container{
width:500px;
}
#container input[type="text"]{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>

上面的css会将所有input type = text元素设为inline-block，并将输入宽度从父容器中取出40％。即使您更改主容器宽度。内在元素不会受到影响。它将始终显示为两列

选项2 - 仅使用css（使用浮动）

<style type="text/css">
#container{
width:500px;
border:1px solid red;
}
#container input[type="text"]{
display:block;
float:left;
width:40%;
margin-left:5%;
}
.clearfix{
clear: both;
} 
.clearfix:before,
.clearfix:after{
display: table;
content: "";
}
.clearfix:after{
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
</style>

在HTML中我正在为容器DIV添加额外的类

<div id="container" class="clearfix">

此选项使用float而不是inline-block。在这里，我添加了一个额外的类.clearfix，每当我们执行浮动时，我们需要在浮动元素之后清除它。否则它也会对下面的元素产生影响

选项3 - 将特定类添加到播放器输入框和分数输入框

<style type="text/css">
#container{
width:500px;
}
#container .player,
#container .score{
display:inline-block;
width:40%;
margin-left:5%;
}
</style>

<script type="text/javascript">
function createTextBoxes(event, txtBoxCount) {
  var iCounter = 0,
  playerText = null,
  scoreText = null;

  for (iCounter = 0; iCounter < txtBoxCount; iCounter++) {
    playerText = document.createElement('input');
    scoreText = document.createElement('input');
    $(playerText).attr('type', 'text');
    $(scoreText).attr('type', 'text');
    $(playerText).attr('id', 'txtPlayerId' + (iCounter + 1));
    $(scoreText).attr('id', 'txtPlayerId1' + (iCounter + 1));
    $(playerText).attr('placeholder', 'player ' + (iCounter + 1));
    $(scoreText).attr('placeholder', '0');

    $(playerText).attr('class', 'player');
    $(scoreText).attr('class', 'score');

    $('#container').append(playerText);
    $('#container').append(scoreText);
  }
}
</script>

使用jquery创建两个文本框列（列表）

1 个答案: