원하지 않는 줄 바꿈을 만드는 문단을 닫습니다.

모든 원이 페이지 전체에 정렬되도록하기 위해 노력했지만 대신 세로로 스태킹됩니다. 줄 바꿈 또는 내 단락의 CSS와 동일한 CSS 특성을 허용하는 다른 도구를 제거 할 수있는 방법이 있습니까? 대신 div를 구현하는 것이 더 쉬울까요?원하지 않는 줄 바꿈을 만드는 문단을 닫습니다.

<div> 
    <p id="developer"> 
    <br> 
    <br> 
    <br> 
    <br> 
    HTML 
    <br> 
    CSS 
    <br> 
    JavaScript & jQuery 
    </p> 

    <p id="designer"> 
      <br> 
    <br> 
    <br> 
    <br> 
     Photoshop 
     <br> 
      Illustrator 
      <br> 
       Responsive Design 
    </p> 

    <p id="uxdesigner"> 
     <br> 
    <br> 
    <br> 
    <br> 
     Flowcharts 
     <br> 
      Wireframes 
      <br> 
       Personas 
    </p> 
</div> 

#developer { 
    background-color: #0071BC; 
    width: 300px; 
    height: 300px; 
    border-radius: 300px; 
    text-align: center; 

} 
#designer { 
    background-color: #0071BC; 
    width: 300px; 
    height: 300px; 
    border-radius: 300px; 
    text-align: center; 
} 
#uxdesigner { 
    background-color: #0071BC; 
    width: 300px; 
    height: 300px; 
    border-radius: 300px; 
    text-align: center; 
}

출처

2013-05-06 Adam Ginther

왼쪽에서 오른쪽으로 p 블록을 쌓으시겠습니까? 그렇다면 display : inline 또는 display : inline-block으로 변경해야합니다. – BrianHall

@BrianDHall'display : inline'은 작동하지 않을 것이며, 전체 객체와 모든 자식들을 인라인 엉망으로 무너 뜨릴 것입니다. –

예, 왼쪽에서 오른쪽으로 스택하는 p 블록을 원했습니다. 나는 당신의 제안에 그것을 바꿨다, 지금 작동한다. 감사. –

추가하십시오 (!) 참고로

p { 
    display:inline-block; 
}

, 당신의 CSS 파일에 레이아웃을 유지하고, 그것을 위해 HTML 요소를 사용하지 마십시오. 특히 <br>으로 간격을 만드는 것은 나쁜 아이디어이며 의미있는 재앙입니다.

출처

2013-05-06 23:52:14

이 경우 display: table을 사용하면 부가 가치를 얻을 수 있습니다. 코드의 훨씬 더 깨끗한 버전이 있습니다 :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

.skills {display: table;} 
.skills p { 
    display: table-cell; 
    vertical-align: middle; 
    background-color: #0071BC; 
    width: 300px; 
    height: 300px; 
    border-radius: 300px; 
    text-align: center; 
    margin: 0; 
} 
.skills span {display: block;} 

</style> 

</head> 
<body> 

<div class="skills"> 
    <p> 
     <span>HTML</span> 
     <span>CSS</span> 
     <span>JavaScript & jQuery</span> 
    </p> 

    <p> 
     <span>Photoshop</span> 
     <span>Illustrator</span> 
     <span>Responsive Design</span> 
    </p> 

    <p> 
     <span>Flowcharts</span> 
     <span>Wireframes</span> 
     <span>Personas</span> 
    </p> 
</div> 

</body> 
</html>

출처

2013-05-07 00:13:06

원하지 않는 줄 바꿈을 만드는 문단을 닫습니다.

답변

관련 문제