플로팅을 사용하지 않고 버튼 위치를 수정하는 방법

버튼을 나란히 정렬하여 올바르게 정렬하는 데 문제가 있습니다. float 리소스를 사용하지 않고 솔루션을 구축해야합니다. 를 참조하십시오플로팅을 사용하지 않고 버튼 위치를 수정하는 방법

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Documento sem título</title> 
     <style type="text/css"> 
      * { 
       margin:0px; 
       padding:0px; 
      } 
      a { 
       display:inline-block; 
       padding: .63em; 
       border:1px solid #ccc; 
       position:relative; 
      } 
      .b2 { 
       padding: .0em 1em .0em 2.1em; 
       text-decoration:none 
      } 
      .icon { 
       position:absolute; 
       width:16px; 
       height:16px; 
       background-color:#999; 
       top:50%; 
       margin-top:-8px; 
       left:2px; 
      } 
     </style> 
    </head> 

    <body> 
     <div style="background-color:#f0f0f0; margin-top:50px; position:relative; height:22px; padding:4px;"> <a href="#"><span class="icon"></span></a> 

      <div style="display:inline-block; width:2px; height:22px; background-color:#666;"></div> <a href="#"><span class="icon"></span></a> 
<a href="#" class="b2"><span class="icon"></span><span>Casa d wqe dde qeasd sd</span></a> 

     </div> 

<h2 style="background:#999"> test</h2> 

<a href="#" class="b2"><span class="icon"></span><span>Casa d wqe dde qeasd sd</span></a> 

    </body> 

</html>

출처

2012-12-12 claudioivp

임 확실하지. – Ladineko

css 정리 : 모든 인라인 스타일을 CSS 클래스에 넣습니다. 따라서 수리가 어렵습니다. – rekire

세 번째 버튼 (아이콘 및 텍스트) - 참조 : http://s11.postimage.org/b8iytw143/Untitled_5.png – claudioivp

는 여기를보십시오 :

div .b2 { 
    top:-6px; 
}

Demo

출처

2012-12-12 18:42:33 rekire

이것은 좋은 해결책이 아닙니다. 왜냐하면 내가 사용하는 모든 장소에서이 작업을 수행해야하기 때문입니다. 단추. – claudioivp

예가 너무 지저분합니다. 지금까지이 해킹에 아무런 문제가 없습니다. – rekire

이 솔루션을 복사해야합니다. primefaces.org/showcase/ui/commandButton.jsf – claudioivp

무엇 정렬되지 않은 목록 항목을 사용하는 방법에 대해? 이 같은 CSS 속성을 사용하여 인라인 될 jsFiddle

당신은 그것을 설정 :이 jsFiddle를 참조하십시오 당신의 이야기 어떤 버튼 일어나고 무엇을 예상

li { 
list-style:none; 
display:inline; 
}

출처

2012-12-12 18:44:31 user1470118

ul/li은 버튼 일 뿐이므로 여기에서 벗어납니다. – claudioivp

무엇을 의미합니까? 당신은 여전히 버튼으로 다루고 있습니다 ... 당신은 그냥 ul/li을 사용하여 – user1470118

hmm을 정렬하는 방법으로 사용하고 있습니다. 이상하게 생각합니다. ul/li이 하나의 버튼을 만드는 것 같습니다. 어떤 경우에는 버튼과 텍스트를 혼합해야합니다 ... – claudioivp

플로팅을 사용하지 않고 버튼 위치를 수정하는 방법

답변

관련 문제