2017-04-25 1 views
-3

같은 행에 세 가지 형식이 있어야하며 왼쪽, 가운데 및 오른쪽으로 표시해야합니다. 나는 여러 번 시도해 보았습니다.양식을 동일한 행에 보관하려면 어떻게합니까?

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Conspiracy Theories</title> 
     <link href="p1.css" type="text/css" rel="stylesheet"> 
     </head> 
      <body> 
      <h1>World reacts to US strikes, with many expressing support</h1> 

     <div class="div1"> 
     <form action="WP8.html"><input type="submit" value="Prev." /></form> 
     <form action="web.html"><input type="submit" value="Home" /></form> 
     <form action="WP10.html"><input type="submit" value="Next" /></form> 
     </div> 

     <center><img src="http://www.darpa.mil/DDM_Gallery/gremlins-619-316-pp.jpg"></center> 

      ect... 
+1

'디스플레이 : inline' 양식에. –

+1

'

'요소는 더 이상 사용되지 않으므로 사용해서는 안됩니다. [read more] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) – happymacarts

+1

왜 양식을 사용하고 있습니까? 단지 링크를 사용하면 훨씬 더 의미가 크고 HTML은 적게 드는 기능을 수행하는 것처럼 보입니다. – TricksfortheWeb

답변

0

당신은 그 버튼의 용기에 justify-content: space-between;으로 display: flex를 사용할 수 있습니다. 이것은 동일 용기/페이지의 폭을 가로 질러 버튼을 배포합니다 :

.div1 { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Conspiracy Theories</title> 
 
    <link href="p1.css" type="text/css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <h1>World reacts to US strikes, with many expressing support</h1> 
 

 
    <div class="div1"> 
 
    <form action="WP8.html"><input type="submit" value="Prev." /></form> 
 
    <form action="web.html"><input type="submit" value="Home" /></form> 
 
    <form action="WP10.html"><input type="submit" value="Next" /></form> 
 
    </div> 
 

 
    <center><img src="http://www.darpa.mil/DDM_Gallery/gremlins-619-316-pp.jpg"></center>

관련 문제