신참 HTML5 및 CSS3 문제

Question

나는 새로운 처음

어쨌든 나는이 순간에 HTML5에 & CSS3를 코딩하는 방법을 배우고 일하고 생활

에 온 HTML 이후 HTML5 & CSS와 새로. 하지만 도로 블록을 만났습니다 ...

내 바닥 글 배경의 왼쪽에 내 오른쪽 정보를 가져오고 내 바닥 글 배경 오른쪽에 브라우저 아이콘을 가져오고 싶습니다 .... 나는 놀았습니다. 포기하지 않는 9 시간 동안의 문제는 내가 여기서 발견 한 몇 가지 제안을 시도해 보았습니다 ...

당신은 당신이 당신은 <ul> 요소에 상대 위치를 사용할 수 http://cowboy0629.ddns.net/test

.mainFooter { 
 
    width: 97%; 
 
    float: left; 
 
    height: 40px; 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    background-color: #141476; 
 
    margin: 2% 1.5% 2% 1.5%; 
 
} 
 
.footerIcons img.chrome { 
 
    width: auto; 
 
    height: 20px; 
 
} 
 
.footerIcons img.firefox { 
 
    width: auto; 
 
    height: 23px; 
 
} 
 
.footerIcons img.safari { 
 
    width: auto; 
 
    height: 23px; 
 
} 
 
.footerIcons { 
 
    float: right; 
 
    height: 9px; 
 
} 
 
.footerIcons ul { 
 
    float: right; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
} 
 
.footerIcons li { 
 
    float: right; 
 
    list-style:none; 
 
    margin-left:5px; 
 
} 
 
.footerIcons span p { 
 
    height: 20px; 
 
    float: left; 
 
    color: #3399FF; 
 
    width: 97%; 
 
    margin: 9px; 
 
}

<footer class="mainFooter"> 
 
    <div class="footerIcons"> 
 
    <span> 
 
    <p>Copyright &copy; 2017 <a href="http://cowboy0629.ddns.net" title="cowboydesign.com">cowboyDesigns.com</a></p> 
 
    </span> 
 

 
    <ul> \t \t \t 
 
     <li> 
 
     <img class="chrome" src="images/icons/black-chrome-icon.png" alt=""> 
 
     </li> 
 
     <li> 
 
     <img class="firefox" src="images/icons/black-firefox-icon.png" alt=""> 
 
     </li> 
 
     <li> 
 
     <img class="safari" src="images/icons/black-safari-icon2.png" alt=""> 
 
     </li> 
 
    </ul> 
 
    </div> \t 
 
</footer>

Answer 1

위의 해결 방법으로 문제가 해결 될 수 있지만 해킹 가능성이 더 높습니다. p 및 ul은 기본적으로 같은 줄에 있지 않습니다. 는 각 브라우저 아이콘과 같은 폭과 높이의 아이콘을 사용에 대한 별도의 규칙에 대한 필요가 없습니다

.mainFooter p { 
color: #3399FF; 
display: inline-block; 
margin: 9px; 
} 

.mainFooter ul { 
display: inline-block; 
float: right; 
list-style: none; 
margin: 0 auto; 
} 

.mainFooter img { 
width: 30px; 
height: 30px; 
margin: 5px; 
} 

다음과 같이 설정과 CSS를 기존의 CSS 규칙을 교체해야합니다.

그냥 당신이 비슷한 것 만든 것을 위에 구축

Answer 2

고토 할 수있는 실제 페이지를 참조한다.

.footerIcons ul { 
    position: relative; 
    top: -47px; 
} 

컨테이너 크기를 30 %로 설정하고 div 정렬을하는 것과 같은 일을하는 것은 엉성한 문제 일 수 있습니다.

Answer 3

copyright 부분의 CSS 파일에서 .floatericons의 부동 설정을 왼쪽으로 변경하십시오.

.footerIcons { 
float: left; 
height: 9px; } 

이 부분을 추가

.footerIcons ul { 
position: relative; 
top: -47px; 
left:600px; 
float:right;} 

Answer 4

나는이를 위해 생각할 수있는 여러 가지 방법이있다.

<footer class="mainFooter"> 
    <ul> 
    <li style="float:left"><a href="http://cowboy0629.ddns.net" title="cowboydesign.com">Copyright © 2017 cowboyDesigns.com</a></li> 
    <li style="float:right"><img class="chrome" src="images/icons/black-chrome-icon.png" alt=""></li> 
    <li style="float:right"><img class="firefox" src="images/icons/black-firefox-icon.png" alt=""></li> 
    <li style="float:right"><img class="safari" src="images/icons/black-safari-icon2.png" alt=""></li> 
    </ul>   
</footer> 

그것은 수직 정렬 관련하여 작은 사랑을 사용할 수 있지만 그것은 작동 :

이 작동합니다.

내비게이션 막대의 링크를 display:inline으로 설정하지 않을 것입니다. 주위에있는 블록을 채우지 않기 때문에 클릭하기가 더 어렵 기 때문입니다 ... 또한 인라인 스타일이 아닌 유틸리티 CSS 부동 클래스를 사용합니다.

플로팅 및 위치 지정은 CSS에서 배우기 가장 어려운 것 중 하나지만 정리가 쉽고 빠릅니다.

체크 아웃이 video on using Chrome DevTools as an IDE

뿐만 아니라 당신은 실시간으로 변경 사항을 볼 수 있습니다, 당신도 당신이 저장됩니다 변경 사항 때문에 다시 원본 파일을 매핑 할 수 있습니다.

또는 바로 구운 것 같은 솔루션을 제공하는 프레임 워크를 사용할 수 있습니다. 저는 Foundation에서 큰 팬이고 grid and alignment classes은이 문제에 잘 맞을 것입니다.

당신은 학교에서이 작업을하고있는 것 같아서 프레임 워크를 사용할 수 없지만 어떻게 문제를 해결했는지, 사용한 코드를 살펴볼 수 있습니다.

Answer 5

:

footer { 
 
    width: 97%; 
 
    height: 40px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    background-color: #141476; 
 
    margin: 2% 1.5%; 
 
} 
 
footer p, 
 
.footerIcons{ 
 
    line-height: 20px; 
 
    margin: 9px; 
 
} 
 
footer p{ 
 
    float: left; 
 
    color: #3399FF; 
 
} 
 
.footerIcons { 
 
    float: right; 
 
} 
 
.footerIcons img.firefox, 
 
.footerIcons img.safari, 
 
.footerIcons img.chrome{ 
 
    width: auto; 
 
    height: 23px; 
 
}

<footer> 
 
    <p>Copyright &copy; 2017 <a href="http://cowboy0629.ddns.net" title="cowboydesign.com" target="_blank">cowboyDesigns.com</a></p> 
 
    <div class="footerIcons"> 
 
    <img class="chrome" src="images/icons/black-chrome-icon.png" alt=""> 
 
    <img class="firefox" src="images/icons/black-firefox-icon.png" alt=""> 
 
    <img class="safari" src="images/icons/black-safari-icon2.png" alt=""> 
 
    </div> \t 
 
</footer>