목록 항목을 스크린 크기로 축척하고 가로로 유지하는 방법은 무엇입니까?

두 개의 가로 방향 탐색 목록이있는 매우 간단한 웹 사이트를 만듭니다. 하나는 상단에, 하나는 하단에 있습니다. 두 목록의 목록 항목을 화면을 작게 만들거나 작은 화면의 다른 컴퓨터에서 볼 때 가로로 유지 (크기가 작아짐)되도록하고 지금하고있는 것처럼 움직이지 않도록합니다. 폭과 여백을 백분율과 자동으로 변경하여 인라인으로 만들려고했지만 새로운 것이므로 근본적으로 잘못된 일을하고 있습니다. 웹 사이트의 다른 부분이 허점이 생기면 걱정하지 마십시오. 저는 HTML과 CSS를 배우기 시작했습니다.목록 항목을 스크린 크기로 축척하고 가로로 유지하는 방법은 무엇입니까?

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-image: url("paper.jpg"); 
 
    background-repeat: repeat-y; 
 
    text-align: center; 
 
} 
 
.heading { 
 
    margin: 0% 46%; 
 
} 
 
.button { 
 
    display: inline-block; 
 
    padding: 15px 20px; 
 
    font-size: 12px; 
 
    cursor: pointer; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    outline: none; 
 
    color: #fff; 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    border-radius: 10px; 
 
    box-shadow: 0 5px #999; 
 
    margin: auto; 
 
    width: auto; 
 
} 
 
.button:hover { 
 
    background-color: #3e8e41 
 
} 
 
.button:active { 
 
    background-color: #3e8e41; 
 
    box-shadow: 0 5px #666; 
 
    transform: translateY(4px); 
 
} 
 
.myDiv { 
 
    background-color: none; 
 
    margin: -20px 90px; 
 
    height: 650px; 
 
    border: 8px double #90EE90; 
 
    border-radius: 20px; 
 
    color: white; 
 
    text-align: justify; 
 
    font-family: "Arial", Times, serif; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: auto; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    width: 50%; 
 
} 
 
li { 
 
    display: inline; 
 
    border-right: 1px solid #bbb; 
 
    width: 100% 
 
} 
 
li:last-child { 
 
    border-right: none; 
 
} 
 
li a { 
 
    color: white; 
 
    padding: 14px 76px; 
 
    text-decoration: none; 
 
}

<!DOCTYPE html5> 
 
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 

 
    <h1 class="heading">Webseite</h1> 
 

 
    <button class="button">Button 1</button> 
 
    <button class="button">Button 2</button> 
 
    <button class="button">Button 3</button> 
 
    <button class="button">Button 4</button> 
 
    <button class="button">Button 5</button> 
 

 
    <div class="myDiv">Was willst du machen?</div> 
 

 
    <ul> 
 
    <li><a href="#home">Salman</a> 
 
    </li> 
 
    <li><a href="#news">Patric</a> 
 
    </li> 
 
    <li><a href="#contact">IMIBE</a> 
 
    </li> 
 
    <li><a href="#about">About</a> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

출처

2016-10-13 Salman

당신은 미디어 query' http://www.w3schools.com/'볼 필요가 있습니다 cssref/css3_pr_mediaquery .asp 또한 건물 내비게이션과 같은 또 다른 사이트입니다. http://www.w3schools.com/css/css_navbar.asp – Andrew

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-image: url("paper.jpg"); 
 
    background-repeat: repeat-y; 
 
    text-align: center; 
 
} 
 
.heading { 
 
    margin: 0% 46%; 
 
} 
 
.button { 
 
    display: inline-block; 
 
    padding: 15px 20px; 
 
    font-size: 12px; 
 
    cursor: pointer; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    outline: none; 
 
    color: #fff; 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    border-radius: 10px; 
 
    box-shadow: 0 5px #999; 
 
    margin: auto; 
 
    width: auto; 
 
} 
 
.button:hover { 
 
    background-color: #3e8e41 
 
} 
 
.button:active { 
 
    background-color: #3e8e41; 
 
    box-shadow: 0 5px #666; 
 
    transform: translateY(4px); 
 
} 
 
.myDiv { 
 
    background-color: none; 
 
    margin: -20px 90px; 
 
    height: 650px; 
 
    border: 8px double #90EE90; 
 
    border-radius: 20px; 
 
    color: white; 
 
    text-align: justify; 
 
    font-family: "Arial", Times, serif; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0 20px; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    width: calc(100% - 40px); 
 
    display: flex; 
 
} 
 
li { 
 
    display: inline; 
 
    border-right: 1px solid #bbb; 
 
    width: 25% 
 
} 
 
li:last-child { 
 
    border-right: none; 
 
} 
 
li a { 
 
    color: white; 
 
    text-decoration: none; 
 
}

<!DOCTYPE html5> 
 
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 

 
    <h1 class="heading">Webseite</h1> 
 

 
    <button class="button">Button 1</button> 
 
    <button class="button">Button 2</button> 
 
    <button class="button">Button 3</button> 
 
    <button class="button">Button 4</button> 
 
    <button class="button">Button 5</button> 
 

 
    <div class="myDiv">Was willst du machen?</div> 
 

 
    <ul> 
 
    <li><a href="#home">Salman</a> 
 
    </li> 
 
    <li><a href="#news">Patric</a> 
 
    </li> 
 
    <li><a href="#contact">IMIBE</a> 
 
    </li> 
 
    <li><a href="#about">About</a> 
 
    </li> 
 
    </ul> 
 

 

 

 

 

 
</body> 
 

 
</html>

출처

2016-10-13 09:34:13

body { 
 
    margin: 0; 
 
    padding:0; 
 
} 
 

 
body { 
 
    background-image: url("paper.jpg"); 
 
    background-repeat: repeat-y; 
 
    text-align: center; 
 
} 
 

 
.heading { 
 
    margin: 0% 46%; 
 
} 
 

 
.button { 
 
    display: inline-block; 
 
    padding: 15px 0px; 
 
    font-size: 12px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    outline: none; 
 
    color: #fff; 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    border-radius: 10px; 
 
    box-shadow: 0 5px #999; 
 
    margin: auto; 
 
    width: 15%; 
 
} 
 

 
.button:hover {background-color: #3e8e41} 
 

 
.button:active { 
 
    background-color: #3e8e41; 
 
    box-shadow: 0 5px #666; 
 
    transform: translateY(4px); 
 
} 
 

 
.myDiv { 
 
    background-color: none; 
 
    margin: -20px 90px; 
 
    height: 650px; 
 
    border: 8px double #90EE90; 
 
    border-radius: 20px; 
 
    color: white; 
 
    text-align: justify; 
 
    font-family: "Arial", Times, serif; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
} 
 

 

 
ul { 
 
    list-style-type: none; 
 
    margin: auto; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    display: inline; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    border-right:1px solid #bbb; 
 
    width: 20%  
 
} 
 

 
li:last-child { 
 
    border-right: none; 
 
} 
 

 
li a { 
 
    color: white; 
 
    text-decoration: none;  
 
}

<!DOCTYPE html5> 
 
    <html> 
 

 
    <head> 
 

 
    </head> 
 

 
    <body> 
 

 
     <h1 class="heading">Webseite</h1> 
 

 
     <button class="button">Button 1</button> 
 
     <button class="button">Button 2</button> 
 
     <button class="button">Button 3</button> 
 
     <button class="button">Button 4</button> 
 
     <button class="button">Button 5</button> 
 

 
     <div class="myDiv">Was willst du machen?</div> 
 

 
      <ul> 
 
        <li><a href="#home">Salman</a></li> 
 
        <li><a href="#news">Patric</a></li> 
 
        <li><a href="#contact">IMIBE</a></li> 
 
        <li><a href="#about">About</a></li> 
 
      </ul> 
 

 

 

 

 
</body> 
 

 
</html>

출처

2016-10-13 09:45:12

목록 항목을 스크린 크기로 축척하고 가로로 유지하는 방법은 무엇입니까?

답변

관련 문제