programing

div 요소를 인라인으로 표시하려면 어떻게 해야 합니까?

powerit 2023. 7. 27. 22:25
반응형

div 요소를 인라인으로 표시하려면 어떻게 해야 합니까?

이 HTML이 지정된 경우:

<div>foo</div><div>bar</div><div>baz</div>

다음과 같이 인라인으로 표시하는 방법은 무엇입니까?

푸바바즈

이런 식이 아닙니다.

푸
바
광란의

인라인 디브는 웹의 괴짜이고 스팬이 될 때까지 이겨야 합니다(최소한 10번 중 9번)...

<span>foo</span>
<span>bar</span>
<span>baz</span>

...원래의 질문을 무시하고...

그것은 또 다른 것입니다.

div.inline { float:left; }
.clearBoth { clear:both; }
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->

다음과 같이 작성해 보십시오.

div { border: 1px solid #CCC; }
    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>

이 질문과 답변을 두어 번 읽어보니 편집이 상당히 진행되고 있다고 추측할 수밖에 없고, 충분한 정보를 제공하지 않아 오답을 받은 것이 아닌가 하는 의심이 듭니다.나의 단서는 의 사용에서 나옵니다.br꼬리표를 달다

대릴에게 사과합니다.class="display"를 style="display: inline"으로 읽습니다.의미론적으로 문제가 있는 클래스 이름을 사용하더라도 정답을 알고 있습니다 ;-)

의 잘못된 사용br텍스트 레이아웃이 아닌 구조 레이아웃을 제공하는 것은 제가 좋아하는 것에는 너무 널리 퍼져 있습니다.

인라인 요소 이상을 삽입하려는 경우divs그러면 당신은 그것들을 띄워야 합니다.divs는 그것들을 인라인으로 만드는 것보다.

부동 소수점:

===== ======= ==   **** ***** ******   +++++ ++++
===== ==== =====   ******** ***** **   ++ +++++++
=== ======== ===   ******* **** ****   
===== ==== =====                       +++++++ ++
====== == ======

인라인 div:

====== ==== ===== ===== == ==== *** ******* ***** ***** 
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++

만약 당신이 전자를 쫓고 있다면, 이것이 당신의 해결책이고 그것들을 잃는 것입니다.br태그:

<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>

이 div들의 너비는 유동적이므로, 만약 당신이 행동을 통제하고 싶다면, 자유롭게 그것들에 너비를 참고하세요.

고마워요, 스티브

사용하다display:inline-blockIE6/7에 대한 마진 및 미디어 쿼리 포함:

<html>
  <head>
    <style>
      div { display:inline-block; }
      /* IE6-7 */
      @media,
          {
          div { display: inline; margin-right:10px; }
          }
   </style>
  </head>
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</html>

사용해야 합니다.<span>대신에<div>정확한 인라인 방식을 위해div는 블록 수준 요소이고 인라인 블록 수준 요소에 대한 요구 사항이기 때문입니다.

다음은 요구 사항에 따른 HTML 코드입니다.

<div class="main-div">
 <div>foo</div>
 <div>bar</div>
 <div>baz</div>`
</div>

두 가지 방법이 있습니다.

  • 간단한 방법으로display:inline-block;
  • 또는 사용float:left;

따라서 디스플레이 속성을 변경해야 합니다.display:inline-block;완력으로

예1

div {
    display: inline-block;
}

예 2 

div {
    float: left;
}

당신은 플로트를 클리어해야 합니다.

.main-div:after {
    content: "";
    clear: both;
    display: table;
}

앞서 언급했듯이, 디스플레이: 인라인이 아마도 당신이 원하는 것일 것입니다.일부 브라우저는 인라인 블록도 지원합니다.

http://www.quirksmode.org/css/display.html#inlineblock

"float: left"가 있는 포장지 div를 사용하고 float: left가 포함된 상자를 안에 넣으면 됩니다.

CSS:

wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}

.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}

HTML:

<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>

좋아요, 저는:

<style type="text/css">
    div{
        position: relative;
        display: inline-block;
        width:25px;
        height:25px;
    }
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>

<span>?

<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>

사람들이 이것이 끔찍한 아이디어라고 말하는 것은 알지만 실제로는 Picasaweb이 앨범의 미리 보기를 표시하는 데 사용하는 주석이 있는 타일 이미지와 같은 것을 하고 싶다면 유용할 수 있습니다.
example/message http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html 을 참조하십시오(class gog-goo-message-block; 여기서 ib로 축약합니다).

/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }

그 CSS가 주어지면, 당신의 div를 classib로 설정하고, 이제 그것은 마법처럼 인라인 블록 요소입니다.

스팬을 사용하거나 디브를 왼쪽으로 띄울 것입니다.부동의 유일한 문제는 나중에 부동을 지우거나 포함된 div가 오버플로 스타일을 auto로 설정해야 한다는 것입니다.

당신은 3개의 디브를 포함해야 합니다.다음은 예입니다.

CSS

div.contain
{
  margin:3%;
  border: none;
  height: auto;
  width: auto;
  float: left;
}

div.contain div
{
  display:inline;
  width:200px;
  height:300px;
  padding: 15px;
  margin: auto;
  border:1px solid red;
  background-color:#fffff7;
  -moz-border-radius:25px; /* Firefox */
  border-radius:25px;
}

참고: 테두리 반지름 특성은 선택 사항이며 CSS3 호환 브라우저에서만 작동합니다.

HTML

<div class="contain">
  <div>Foo</div>
</div>

<div class="contain">
  <div>Bar</div>
</div>

<div class="contain">
  <div>Baz</div>
</div>

div 'foo' 'bar' 및 'baz'는 각각 '포함' div 내에 있습니다.

CSS를 사용하지 않고도 이 방법을 사용할 수 있다고 생각합니다.

<table>
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
    <tr>
        <td>baz</td>
    </tr>
</table>

현재 블록 레벨 요소를 사용하여 원하지 않는 결과를 얻고 있습니다.따라서 스팬, 스몰 등의 요소를 인라인으로 연결할 수 있습니다.

<span>foo</span><span>bar</span><span>baz</span>

이것이 저에게 효과가 있었습니다.저는 부트스트랩으로 작업하고 있었고 라디오 버튼이 줄을 잇기를 원했습니다.

                <div class="form-group form-inline-radio">
                    <div class="form-check form-radio-outline form-radio-primary mb-3">
                        <input type="radio" name="formRadio4" id="formRadio4" checked="" class="form-check-input">
                        <label for="formRadio4" class="form-check-label"> Radio Outline Warning </label>
                    </div>
                    <div class="form-check form-radio-outline form-radio-primary mb-3">
                        <input type="radio" name="formRadio4" id="formRadio4" checked="" class="form-check-input">
                        <label for="formRadio4" class="form-check-label"> Radio Outline Warning </label>
                    </div>
                </div>

그리고 CSS:

.form-inline-radio {
    display: flex;
    overflow: hidden;
}

.form-check {
    margin-right: 10px;
}

우리는 이렇게 할 수 있습니다.

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>

<div class="cdiv">
<div class="inline"><p>para 1</p></div>
 <div class="inline">
     <p>para 1</p>
     <span>para 2</span>
     <h1>para 3</h1>
</div>
 <div class="inline"><p>para 1</p></div>

http://jsfiddle.net/f8L0y5wx/

<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
    #div01, #div02, #div03 {
                                float:left;
                                width:2%;
    }   
 </style>
 <div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 //solution 2

 <style>
      #div01, #div02, #div03 {
                                  display:inline;
                                  padding-left:5px;
      }   
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 /* I think this would help but if you have any other thoughts just let me knw      kk */

페이지의 전체 너비를 합하도록 너비를 고정하는 경향이 있습니다. 아마도 너비가 고정된 페이지를 사용하는 경우에만 작동할 것입니다.또한 "부유".

언급URL : https://stackoverflow.com/questions/224602/how-do-you-make-div-elements-display-inline

반응형

'programing' 카테고리의 다른 글

Spring 시제품 스코프는 언제 사용해야 합니까?  (0) 2023.07.27
오라클 시퀀스의 LAST_NUMBER  (0) 2023.07.27
파이썬 세트 작업의 시간 복잡성?  (0) 2023.07.27
iPhone 6 / iOS 8에서 NFC 태그 읽기  (0) 2023.07.27
Angular 4.3 - HttpClient 세트 매개변수  (0) 2023.07.27

'programing'의 다른글

  • 현재글div 요소를 인라인으로 표시하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바