HTML의 같은 줄에 텍스트를 배치하는 방법은 무엇입니까?

학교의 지리 수업을 위해 다른 국가에서 프리젠 테이션을하고 있으며 옵션 중 하나는 웹 사이트였습니다. 나는 기본적인 HTML을 알고 있지만 디자인과 디스플레이 측면에 대해서는별로 모른다. 지금은 많은 웹 사이트에서 볼 수있는 것처럼 같은 줄에 텍스트를 가져 오는 데 많은 어려움을 겪고 있습니다. 내 코드는 현재 다음과 같습니다.HTML의 같은 줄에 텍스트를 배치하는 방법은 무엇입니까?

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Swedish Political Geography</title> 
     </head> 
     <body> 
     <font face="verdana" size=“10”>Swedish Political Geography</font> 
     <ul class="navigation"> 
      <ul><font face="verdana" size=“10”>Borders</font></ul> 
      <ul><font face="verdana" size=“10”>Government</font></ul> 
     </ul> 
    </body> 
</html>

이 페이지에 다른 파일을 연결하는 데 문제가 있습니다. 도움이된다면 크게 감사하겠습니다. 이것은 내가 그것을 위해 노력했습니다 코드입니다 :

<a href="borders.html">Borders</a>

나는 내 코드를 테스트하기 위해 로컬 호스트 서버를 사용하고 언급해야하고 내가 궁극적으로 내 프로젝트를 제시하는 방법이다.

편집 : 명확히하기 위해 스웨덴의 정치 지리, 국경 및 정부 모두가 같은 노선에 있도록하고 싶습니다. -

출처

2017-12-02 Harry Potter

은 모두 같은 줄에있을 Borders하지 Borders – Radu

이 솔루션에 대한 CSS의 조금 필요합니다. 나는 그것부터 시작할 것이다.

디렉토리에 모든 HTML 파일이있는 경우 확장자가 CSS 인 경우 index.css 또는 원하는 이름의 CSS 파일을 만드십시오. 각 .html 파일의 <head></head>이 링크를 넣어 내부 (당신이 index.css을 사용하지 않은 경우 CSS 파일의 이름을 변경) : 당신의 HTML에 관한

<link rel="stylesheet" type="text/css" href="index.css">

의 <ul></ul> 요소가 정말 각 항목 목록을 포함하는 의미 항목이 하나만있는 경우에도 <li></li> 항목으로 정의됩니다. 그 알고, 그것은 조금 더 다음과 같아야합니다

<font face="verdana" size=“10”>Swedish Political Geography</font> 
<ul class="navigation"> 
    <li><font face="verdana" size=“10”>Borders</font></li> 
    <li><font face="verdana" size=“10”>Government</font></li> 
</ul>

<ul> 및 <li> 요소는 블록 레벨 요소, 그들은 가능한 폭의 100 %를 차지합니다 의미한다. 우리는 그것들을 inline-block 요소들로 바꾸고 싶습니다. 그것들은 텍스트와 함께 인라인을 가져 오지만 블럭 레벨 요소들처럼 비트를 다루는 능력을 여전히 제공합니다. 이를 위해

, CSS 파일에이 드롭 :

ul { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
}

... 그리고 대한 <li> :

li { 
    display: inline-block; 
}

그것은 지금 매우 근접해야합니다,하지만 당신은에서 총알을 알 수 있습니다 목록은 여전히 매달려 있습니다.의 그 제거하자

list-style-type: none; 추가

ul { 
    display: inline-block; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}

장식 기능의 종류를 표시하지 <li>을 알려줍니다.

이제 연속 된 텍스트 줄을 가져야합니다!

예 : - : 인라인,``ul.navigation의 block`에

<font face="verdana" size=“10”>Swedish Political Geography</font> 
 
<ul class="navigation"> 
 
    <li><font face="verdana" size=“10”>Borders</font></li> 
 
    <li><font face="verdana" size=“10”>Government</font></li> 
 
</ul>

출처

2017-12-02 20:35:54

UL은 블록 요소입니다, 당신은 인라인 요소

디스플레이로 설정해야합니다 : 인라인;

그냥이 같은 스타일 시트

(또는 CSS 파일 내부) :

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Swedish Political Geography</title> 
      <style> 
       ul.navigation { 
       margin: 0; 
       padding: 4px; 
       } 
       ul.navigation li { 
       display: inline; 
       margin-right: 5px; 
       } 
      </style> 
     </head> 
     <body> 
     <font face="verdana" size=“10”>Swedish Political Geography</font> 
     <ul class="navigation"> 
      <li><font face="verdana" size=“10”>Borders</font></li> 
      <li><font face="verdana" size=“10”>Government</font></li> 
     </ul> 
    </body> 
</html>

출처

2017-12-02 20:14:50 jlemon

싶어해야합니다 시작을 위해 '표시를 추가 – jlemon

HTML의 같은 줄에 텍스트를 배치하는 방법은 무엇입니까?

답변

관련 문제