서로의 가운데에 두 개의 연락처 양식을 사용할 수 없습니다.

Question

몇 시간 동안 CSS 튜토리얼을보고 인라인 할 수있는 여러 가지 방법을 시도해 왔지만 그렇게 할 수 없습니다.

저는 현재 UI/UX를위한 최상의 기술을 배우고 있으며 영감을 얻기 위해 Copdepen을 사용하고 있습니다.

저는이 두 형식을 서로 인라인으로 연결하려고합니다.

도움이 될 것입니다.

a fiddle지도를 구성하는 다른 구성 요소가 아닌 연락처 양식을 올바르게 렌더링했습니다.

정확한 작업 맵 UI의 Codepen입니다.

var myCenter = new google.maps.LatLng(51.308742, -0.320850); 
 

 
function initialize() { 
 
    var mapProp = { 
 
    center: myCenter, 
 
    zoom: 12, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("map"), mapProp); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myCenter, 
 
    }); 
 
    marker.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

body { 
 
    margin: 0; 
 
    background: #78909C 
 
} 
 
.map { 
 
    width: 700px; 
 
    height: 380px; 
 
    margin: calc(50vh - 190px) auto; 
 
    box-shadow: 0 0 40px -10px black; 
 
    background: rgb(240, 240, 240); 
 
    font-family: 'Montserrat', sans-serif; 
 
    max-width: calc(100vw - 60px) 
 
} 
 
#map { 
 
    width: 65%; 
 
    height: 380px; 
 
    display: inline-block 
 
} 
 
.map-c { 
 
    float: right; 
 
    width: 35%; 
 
    height: 100%; 
 
    padding: 25px; 
 
    box-sizing: border-box 
 
} 
 
h1 { 
 
    margin: 0; 
 
    font-weight: normal; 
 
    color: rgb(60, 60, 70); 
 
    font-size: 28px 
 
} 
 
p { 
 
    font-size: 13px; 
 
    margin-top: 20px; 
 
    margin-bottom: 30px 
 
} 
 
.det { 
 
    font-size: 12px; 
 
    margin-bottom: 15px 
 
} 
 
i { 
 
    float: left; 
 
    font-size: 18px !important; 
 
    margin: 0 8px 0 0 
 
} 
 
button { 
 
    margin: 15px 4px; 
 
    padding: 13px 9px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    background: none; 
 
    color: #546973; 
 
    border: 2px solid #78909C; 
 
    transition: all 0.3s; 
 
    border-radius: 8px; 
 
    outline: 0 
 
} 
 
button:hover { 
 
    border-color: rgb(90, 90, 90); 
 
    color: rgb(90, 90, 90) 
 
} 
 
button:after { 
 
    content: 'Directions'; 
 
    font-family: 'Montserrat', sans-serif; 
 
    display: block; 
 
    font-size: 11px; 
 
    margin-top: 8px 
 
} 
 
.fa-envelope:after { 
 
    content: 'Email'; 
 
    margin: 8px 13px 0 
 
} 
 
@media only screen and (max-width: 720px) { 
 
    .map { 
 
    height: 450px; 
 
    margin: calc(50vh - 225px) auto; 
 
    overflow: hidden 
 
    } 
 
    #map { 
 
    width: 100%; 
 
    height: 200px; 
 
    } 
 
    .map-c { 
 
    float: right; 
 
    width: 100%; 
 
    } 
 
    button { 
 
    float: right; 
 
    margin-top: -75px 
 
    } 
 
} 
 
@media only screen and (max-width: 460px) { 
 
    p { 
 
    display: none 
 
    } 
 
    h1 { 
 
    margin-bottom: 20px 
 
    } 
 
    button { 
 
    float: none; 
 
    margin-top: 10px 
 
    } 
 
    .det { 
 
    margin-bottom: 9px 
 
    } 
 
} 
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600); 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-font-smoothing: antialiased; 
 
    -o-font-smoothing: antialiased; 
 
    font-smoothing: antialiased; 
 
    text-rendering: optimizeLegibility; 
 
} 
 
body { 
 
    font-family: "Open Sans", Helvetica, Arial, sans-serif; 
 
    font-weight: 300; 
 
    font-size: 12px; 
 
    line-height: 30px; 
 
    color: #777; 
 
    background: #FFFF; 
 
} 
 
.container { 
 
    max-width: 400px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 
#contact input[type="text"], 
 
#contact input[type="email"], 
 
#contact input[type="tel"], 
 
#contact input[type="url"], 
 
#contact textarea, 
 
#contact button[type="submit"] { 
 
    font: 400 12px/16px"Open Sans", Helvetica, Arial, sans-serif; 
 
} 
 
#contact { 
 
    background: #F9F9F9; 
 
    padding: 25px; 
 
    margin: 50px 0; 
 
} 
 
#contact h3 { 
 
    color: #F96; 
 
    display: block; 
 
    font-size: 30px; 
 
    font-weight: 400; 
 
} 
 
#contact h4 { 
 
    margin: 5px 0 15px; 
 
    display: block; 
 
    font-size: 13px; 
 
} 
 
fieldset { 
 
    border: medium none !important; 
 
    margin: 0 0 10px; 
 
    min-width: 100%; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
#contact input[type="text"], 
 
#contact input[type="email"], 
 
#contact input[type="tel"], 
 
#contact input[type="url"], 
 
#contact textarea { 
 
    width: 100%; 
 
    border: 1px solid #CCC; 
 
    background: #FFF; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
} 
 
#contact input[type="text"]:hover, 
 
#contact input[type="email"]:hover, 
 
#contact input[type="tel"]:hover, 
 
#contact input[type="url"]:hover, 
 
#contact textarea:hover { 
 
    -webkit-transition: border-color 0.3s ease-in-out; 
 
    -moz-transition: border-color 0.3s ease-in-out; 
 
    transition: border-color 0.3s ease-in-out; 
 
    border: 1px solid #AAA; 
 
} 
 
#contact textarea { 
 
    height: 100px; 
 
    max-width: 100%; 
 
    resize: none; 
 
} 
 
#contact button[type="submit"] { 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border: none; 
 
    background: #0CF; 
 
    color: #FFF; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
    font-size: 15px; 
 
} 
 
#contact button[type="submit"]:hover { 
 
    background: #09C; 
 
    -webkit-transition: background 0.3s ease-in-out; 
 
    -moz-transition: background 0.3s ease-in-out; 
 
    transition: background-color 0.3s ease-in-out; 
 
} 
 
#contact button[type="submit"]:active { 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); 
 
} 
 
#contact input:focus, 
 
#contact textarea:focus { 
 
    outline: 0; 
 
    border: 1px solid #999; 
 
} 
 
::-webkit-input-placeholder { 
 
    color: #888; 
 
} 
 
:-moz-placeholder { 
 
    color: #888; 
 
} 
 
::-moz-placeholder { 
 
    color: #888; 
 
} 
 
:-ms-input-placeholder { 
 
    color: #888; 
 
}

<div class="container"> 
 
    <form id="contact" action="" method="post"> 
 
    <h3>Quick Contact</h3> 
 
    <h4>Contact us today, and get reply with in 24 hours!</h4> 
 
    <fieldset> 
 
     <input placeholder="Your name" type="text" tabindex="1" required autofocus> 
 
    </fieldset> 
 
    <fieldset> 
 
     <input placeholder="Your Email Address" type="email" tabindex="2" required> 
 
    </fieldset> 
 
    <fieldset> 
 
     <input placeholder="Your Phone Number" type="tel" tabindex="3" required> 
 
    </fieldset> 
 
    <fieldset> 
 
     <input placeholder="Your Web Site starts with http://" type="url" tabindex="4" required> 
 
    </fieldset> 
 
    <fieldset> 
 
     <textarea placeholder="Type your Message Here...." tabindex="5" required></textarea> 
 
    </fieldset> 
 
    <fieldset> 
 
     <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button> 
 
    </fieldset> 
 
    </form> 
 

 

 
</div> 
 

 
<div class="map"> 
 
    <div id="map"></div> 
 
    <div class="map-c"> 
 
    <h1>ABC Stores</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium id cumque est dolores voluptatibus.</p> 
 
    <div class="det"><i class="fa fa-map-marker"></i> 102 New Road, New City</div> 
 
    <div class="det"><i class="fa fa-phone"></i> 001 2045 509</div> 
 
    <div class="det"><i class="fa fa-globe"></i> www.abcstores.com</div> 
 
    <center> 
 
     <button class="fa fa-car"></button> 
 
     <button class="fa fa-envelope"></button> 
 
    </center> 
 
    </div> 
 
</div>

Answer 1

당신은 HTML 테이블을 사용할 수 있습니다 :

은 또한 다음 코드를 사용할 수 있습니다

<table> 
    <tr> 
     <td> 
      <form> 
      ... 
      </form> 
     </td> 
     <td> 
      <form> 
      ... 
      </form> 
     </td> 
    </tr> 

</table> 

이 인라인 요소를 얻기를위한 나의 preffered 방법이다. 나는 당신이 CSS 응답을 원한다면 나는 모르지만 이것은 효과가있다.