div 스타일 : 숨겨진 태그가 공간을 사용하고 있습니다

Question

문제가 있습니다. 두 개의 HTML 버튼이 있는데 한 번에 하나씩 보여주고 싶습니다. 잘 작동하는 코드가 있지만 문제는 공간입니다. GUI에서 허용되지 않는 두 버튼의 공백이 있습니다. 두 버튼을 같은 위치에 배치하고 싶습니다.

코드는 다음과 같습니다

document.getElementById('searchwithin_'+id+'_searchButton').style.display="none"; 
    document.getElementById(id+'-form-submit').style.display="true"; 

<g2:button style="display:true;" 
      id="${g2:escapeXml(componentId)}-form-submit" 
      name="submitButton" 
      type="submit" 
      value="Search" 
      bamId="${searchBarBam}" 
      actionName="${action}" 
      inputClass="p-userSearchButton" />&nbsp; 

<input style="display:none;" 
     type="button" 
     class="p-userSearchButton" 
     name ="searchinresult" 
     id="searchwithin_${componentId}_searchButton" 
     value="Search Within" 
     onClick="javascript:($C('${componentId}')).filterBySearchWithIn('${searchBarBam}','${componentId}-form-text');"></input> 

을하지만 그것은 작동하지 않습니다 :

function searchWithin(id) 
{ 
    if(document.getElementById("searchwithin").checked) 
    { 
    document.getElementById('searchwithin_'+id+'_searchButton').style.visibility="visible"; 
    document.getElementById(id+'-form-submit').style.visibility="hidden"; 
    } 
    else 
    { 
     document.getElementById('searchwithin_'+id+'_searchButton').style.visibility="hidden"; 
     document.getElementById(id+'-form-submit').style.visibility="visible"; 
    } 
} 

<g2:button style="visibility:visible;" id="${g2:escapeXml(componentId)}-form-submit" name="submitButton" type="submit" value="Search" bamId="${searchBarBam}" actionName="${action}" inputClass="p-userSearchButton" />&nbsp; 

<input style="visibility:hidden;" type="button" class="p-userSearchButton" name ="searchinresult" id="searchwithin_${componentId}_searchButton" value="Search Within" onClick="javascript:($C('${componentId}')).filterBySearchWithIn('${searchBarBam}','${componentId}-form-text');"></input> 

나는 그것을 좋아 변경해야합니다.

Answer 1

display: none;은 visibility: hidden이 아닙니다. 편집 된 코드에서

편집

당신은 버튼을 보여 display: true를 사용하지만 올바른 구문은 다음과 같습니다 display: inline. 더 많은 디스플레이 옵션보기 : w3schools.com/css/css_display_visibility.asp.

그래도 문제가 해결되지 않으면 정확히 인 문제를 더 명확하게 정의하십시오.