Question

我正在使用以下代码输出三个表单字段，但它们出现在单独的行中。我需要它们全部出现在一个段落中的一行上或者在末尾有一个html换行符。我确定它归结为li标签，但如果我改变它（例如跨越）它没有任何区别。我还希望每个字段都指定不同的大小。

我添加了整个页面：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <style type="text/css">
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline;
  }
  </style>

  <script type='text/javascript' src='../../js/dummy.js'></script>





  <style type='text/css'>
    input {display: block;}
ul {list-style-type: none;}
  </style>

<?php
/*
need to get three new inputs on a single line
need to append another line with incremented names for inputs each time the button is hit


*/
?>


<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var myinput = document.getElementById("myinput");
    var form = document.getElementById("myform");
    var submit = document.getElementById("submit");
    var fragment = document.createDocumentFragment();
    var fakejson = JSON.stringify([{
                    "fieldname": "Part No.1"
                }, {
                    "fieldname": "Qty"
                }, {
                    "fieldname": "Description"
                }]);

    myinput.addEventListener("click", function(evt) {
            if (evt.target.value == "+") {
                sucsess(fakejson);
            }
        });


    function appendform(name) {
        var li = document.createElement("li");
        var newinput = document.createElement("input");
        newinput.setAttribute('type', 'text');
        newinput.setAttribute('name', name);
        newinput.setAttribute('size', 60);
        li.textContent = name;
        li.appendChild(newinput);
       form.insertBefore(li, submit);


    }

    function sucsess(data) {

        var json = JSON.parse(data);
        for (key in json) {
            appendform(json[key]["fieldname"]);
        }
    }

}//]]>  

</script>


</head>
<body>

<?php
if (!empty($_POST)) {
    print_r($_POST); echo "<br /><br />"; // print POST data received - delete in production
}
?>

  <ul>
    <form action="" id ="myform" method='post'>

        <input type="button" name="myinput" id="myinput" value='+' title='Add fields'>
        <input type="submit" name="submit" id="submit">

</form>
</ul>

</body>


</html>

Answer 1

使用这种风格：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

格式化Javascript输出

1 个答案: