В первом блоке div есть странный стиль, который я не могу удалить

Существует странное расстояние между элементами исходного div, которое закодировано в html, но я не могу его удалить, несмотря ни на что.В первом блоке div есть странный стиль, который я не могу удалить

<body> 
    <form class='myform'> 
    <div class='form-block'> 
     <span class='line'>1</span> 
     <button class='new-line'>New Line</button> 
     <button class='new-nested'>New Nested Line</button> 
     <input class='input' type='text' placeholder='Enter Value...'> 
     <button class='new-input'>Add input</button> 
    </div> 
    </form> 
</body>

Пожалуйста найти скрипку здесь:

function createNode() { 
 
    var div = document.createElement('div'); 
 
    div.setAttribute('class', 'form-block'); 
 
    var span = document.createElement('span'); 
 
    span.setAttribute('class', 'line'); 
 
    var b1 = document.createElement('button'); 
 
    b1.setAttribute('class', 'new-line'); 
 
    b1.textContent = 'New Line'; 
 
    var b2 = document.createElement('button'); 
 
    b2.setAttribute('class', 'new-nested'); 
 
    b2.textContent = 'New Nested Line'; 
 
    var b3 = document.createElement('button'); 
 
    b3.setAttribute('class', 'new-input'); 
 
    b3.textContent = 'Add input'; 
 
    var ip = document.createElement('input'); 
 
    ip.setAttribute('class', 'input'); 
 
    ip.setAttribute('type', 'text'); 
 
    ip.setAttribute('placeholder', 'Enter Value...'); 
 
    div.insertAdjacentHTML("beforeend", span.outerHTML); 
 
    div.insertAdjacentHTML("beforeend", b1.outerHTML); 
 
    div.insertAdjacentHTML("beforeend", b2.outerHTML); 
 
    div.insertAdjacentHTML("beforeend", ip.outerHTML); 
 
    div.insertAdjacentHTML("beforeend", b3.outerHTML); 
 

 
    var d2 = document.getElementsByClassName("form-block")[0]; 
 
    return div; 
 
}; 
 

 
function newLine() { 
 
    console.log("new line"); 
 
    var toBeAdded = createNode(); 
 
    var theDivParent = this.parentElement.parentElement; 
 
    var previousLast; 
 
    var had = theDivParent.lastChild.hasChildNodes(); 
 
    if (had) { 
 
     previousLast = theDivParent.lastChild.getElementsByClassName("line")[0].innerText.split("."); 
 
     var len = previousLast.length; 
 
     var num = parseInt(previousLast[len - 1]); 
 
     num++; 
 
     previousLast[len - 1] = num; 
 
    } 
 
    theDivParent.insertAdjacentHTML("beforeend", toBeAdded.outerHTML); 
 
    var len = theDivParent.getElementsByClassName("form-block").length; 
 
    if (!had) { 
 
     theDivParent.lastChild.getElementsByClassName("line")[0].innerText = 2; 
 
    } else { 
 
     theDivParent.lastChild.getElementsByClassName("line")[0].innerText = previousLast.join("."); 
 
    } 
 
    theDivParent.lastChild.getElementsByClassName("new-line")[0].onclick = newLine; 
 
    theDivParent.lastChild.getElementsByClassName("new-input")[0].onclick = newInput; 
 
    theDivParent.lastChild.getElementsByClassName("new-nested")[0].onclick = newNested; 
 
    return false; 
 
}; 
 

 
function newNested() { 
 
    console.log("new line"); 
 
    var toBeAdded = createNode(); 
 
    var theDiv = this.parentElement; 
 
    theDiv.insertAdjacentHTML("beforeend", toBeAdded.outerHTML); 
 
    var len = theDiv.getElementsByClassName("form-block").length; 
 
    theDiv.lastChild.getElementsByClassName("line")[0].innerText = theDiv.getElementsByClassName("line")[0].innerText + "." + len; 
 
    theDiv.lastChild.getElementsByClassName("new-line")[0].onclick = newLine; 
 
    theDiv.lastChild.getElementsByClassName("new-input")[0].onclick = newInput; 
 
    theDiv.lastChild.getElementsByClassName("new-nested")[0].onclick = newNested; 
 
    return false; 
 
}; 
 

 
function newInput() { 
 
    console.log("new input"); 
 
    var elem = document.getElementsByClassName("input"); 
 
    this.insertAdjacentHTML("beforebegin", elem[0].outerHTML); 
 
    return false; 
 
}; 
 

 
document.getElementsByClassName("new-input")[0].onclick = newInput; 
 

 
document.getElementsByClassName("new-line")[0].onclick = newLine; 
 

 
document.getElementsByClassName("new-nested")[0].onclick = newNested; 
 

 
document.getElementsByClassName("myform")[0].onsubmit = function() { 
 
    return false; 
 
}

div { 
 
    padding: 0; 
 
    margin: 0; 
 
    background: green; 
 
} 
 

 
button {} 
 

 
input {} 
 

 
span { 
 
    background: red; 
 
}

<body> 
 
    <form class='myform'> 
 
     <div class='form-block'> 
 
      <span class='line'>1</span> 
 
      <button class='new-line'>New Line</button> 
 
      <button class='new-nested'>New Nested Line</button> 
 
      <input class='input' type='text' placeholder='Enter Value...'> 
 
      <button class='new-input'>Add input</button> 
 
     </div> 
 
    </form> 
 
</body>

источник

2017-02-23 Siddhesh Muley

Pls делится вашим кодом 'HTML' и' CSS'. – Chaitali

@ chaitz9 Пожалуйста, найдите скрипт, который не смог добавить код, потому что он просил вставить в него текст и не позволял мне отправлять –

Если вы говорите только о первой * строке, это потому, что HTML, который вы У вас есть текстовые узлы (пробелы) между каждым элементом. Удалите это пустое пространство и «странный» интервал исчезнет: http://jsfiddle.net/q2enzjw9/1/ – nnnnnn

Читать эту arcticle: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ HTML, делает пространство между инлайн-блочных элементов. Когда вы нажмете CTRL + A, вы увидите, что есть одно место. Для борьбы с этим место, вы можете сделать следующее (упомянутый в arcticle Aswell):
Открыть тег на предыдущей строке:

<ul> 
    <li> 
    one</li><li> 
    two</li><li> 
    three</li> 
</ul>

Добавить последние закрывающие скобки на новой строке:

<ul> 
    <li>one</li 
    ><li>two</li 
    ><li>three</li> 
</ul>

или положить комментарии, начиная с предыдущей строки к следующей строке.

<ul> 
    <li>one</li><!-- 
    --><li>two</li><!-- 
    --><li>three</li> 
</ul>

Я надеюсь, что это помогает :)

источник

2017-02-23 06:07:51

Спасибо @Tobias, это сработало !!! –

Рад это слышать! Не забывайте повышать, мне нужны эти очки;) –

-1

here is update fiddle

Я удалили пространство между тегами как

<span class='line'>1</span><button class='new-line'>New Line</button><button class='new-nested'>New Nested Line</button><input class='input' type='text' placeholder='Enter Value...'><button class='new-input'>Add input</button>

источник

2017-02-23 05:58:15 aje

Вы можете использовать поплавок CSS свойство, чтобы удалить пробелы между элементами.

<body> 
<form class='myform'> 
<div class='form-block'> 
    <span class='line floated'>1</span> 
    <button class='new-line floated'>New Line</button> 
    <button class='new-nested floated'>New Nested Line</button> 
    <input class='input floated' type='text' placeholder='Enter Value...'> 
    <button class='new-input floated'>Add input</button> 
</div>

.floated { 
    float:left; 
}

Обновлено JS Fiddle здесь: https://jsfiddle.net/ranjitsachin/LL7n983c/1/

источник

2017-02-23 06:17:46

добавить этот стиль в файл CSS:

button { float: left; }

JSFiddle

источник

2017-02-23 09:09:00

В первом блоке div есть странный стиль, который я не могу удалить

ответ

Смежные вопросы