Question

由于某种原因，我用表创建的输入不是很长。我也使用了normalize.css，所做的只是稍长一点。我需要它来填充页面，我不知道在哪里开始写我的谷歌搜索这样的问题。

此外，除了宽度（我认为）之外，所有css规则都适用。我动态创建的输入不像其他输入那么长。让我大吃一惊。

function makeInput() {
var myInput = document.createElement("input");
myInput.type = "text";
myInput.value = "Here is where the quetsion goes";
return myInput;
}

function makeTable() { // make table with one row and one td


var myTable = document.createElement('table'); // Create table called myTable
var myRow = document.createElement('tr'); // create row called myTr
myTable.id = "myTalbe"
myTable.border = "0"
myTable.cellspacing = "2"
myTable.cellpadding = "0"
myTable.width = "100%"
myTable.type = "text"

var td1 = document.createElement('td'); // td1 for input
var td2 = document.createElement('td'); // td2 for button

var text1 = document.createTextNode('Here is my text');

td1.appendChild(makeInput()); // append makeInput();
td2.appendChild(makeButton()); // append my input form to td1

myRow.appendChild(td1);
myRow.appendChild(td2); // append td1 element to my table


myTable.appendChild(myRow); //

document.body.appendChild(myTable);
}

游戏计划：makeInput()返回一个输入元素。 makeTable()将其置于<td>内。 makeTable()在$(document).ready（jQuery）下运行。

我在页面上有5个其他输入。所有这些都由此管理：

input[type="text"] {
height: 30px;
display: block;
margin: 0;
width: 98%;
font-family: sans-serif;
font-size: 18px;
appearance: none;
box-shadow: none;
border-radius: none;
}

Answer 1

＆＃13;

table tr td input[type="text"] {
height: 30px;
display: block;
margin: 0;
width: 98% !important;
font-family: sans-serif;
font-size: 18px;
appearance: none;
box-shadow: none;
border-radius: none;
}

＆＃13;

你试试这个css ....

Answer 2

表格中包含单元格，边框和填充之间的间距。将它们重置为0，它应填充可用空间，与其他输入匹配。由于输入旁边有一个单元格，它们的宽度不完全相同，因为另一个单元格推动它变窄，但它们至少会排成一行。

＆＃13;

function makeInput() {
  var myInput = document.createElement("input");
  myInput.type = "text";
  myInput.value = "Here is where the quetsion goes";
  return myInput;
}

function makeTable() { // make table with one row and one td
  console.log("Make a table");
  var myTable = document.createElement('table'); // Create table called myTable
  var myRow = document.createElement('tr'); // create row called myTr
  myTable.id = "myTalbe"
  myTable.border = "0"
  myTable.cellspacing = "2"
  myTable.cellpadding = "0"
  myTable.width = "100%"
  myTable.type = "text"

  var td1 = document.createElement('td'); // td1 for input
  var td2 = document.createElement('td'); // td2 for button

  var text1 = document.createTextNode('Here is my text');

  td1.appendChild(makeInput()); // append makeInput() to td1
  td2.appendChild(makeButton()); // append makeButton() to td2

  myRow.appendChild(td1); // append td1 to the row
  myRow.appendChild(td2); // append td2 to the row

  myTable.appendChild(myRow); // append the row to the table

  document.body.appendChild(myTable); // append the table to the body
}

function makeButton() {
  var myButton = document.createElement('button');
  var txt = document.createTextNode('Test');
  
  myButton.appendChild(txt);
  return myButton;
}

$(document).ready(makeTable);

＆＃13;

button, input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  line-height: 30px;
  font-family: sans-serif;
  font-size: 18px;
}

input[type="text"] {
  display: block;
  margin: 0;
  appearance: none;
  box-shadow: none;
  border-radius: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  padding: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" value="Made on load" />
<input type="text" value="This one was made on load too" />

＆＃13;

我的css规则适用于除脚本期间制作的所有输入元素

2 个答案: