Display two divs on same line without blankspace i

2019-04-28 04:18发布

站内文章 / HTML/CSS
32 0 0

问题:

<div id="test" class="pad" contenteditable="true">
  <div id="a" class="fif">text1</div>
  <div id="b" class="fif">text2</div>
</div>

As in above code I have a contenteditable div and many divs inside it (child divs). Number of child divs vary dynamically and also the content between div tags. I want text1 and text2 (i.e. content between div tags) to be displayed on same line, without any blank space in between. Also while typing in contenteditable div if I press ENTER key it should go to next line.

I tried float:left but it does not allow me to go to the next line when I press ENTER key while typing in contenteditable div. display:inline, span when used show blank space in between 2 div contents. I tried using flex from http://www.w3.org/TR/css3-flexbox/ but didn't get desired output.

回答1:

Just make the <div>s have display: inline or display: inline-block and remove the white space between them in the HTML source.

Whether you use inline or inline-block depends on how you want content within the divs to be laid out. Here's an MDN article on the subject.

Demo: http://jsfiddle.net/timdown/GVZPX/

CSS:

.fif {
    display: inline; /* Or inline-block */
}

HTML:

<div id="test" class="pad" contenteditable="true">
  <div id="a" class="fif">text1</div><div id="b" class="fif">text2</div>
</div>


回答2:

<div>
<div style="display: inline-block;">1</div>
<div style="display: inline-block;">2</div>
</div>


回答3:

use display:inline for the inner div

 #test div{
      display:inline;

    }


回答4:

Answering this question more than 5 years after it was originally posted, since none of the answers barring Tim Down's strike at the actual problem. Elaborating it further, here is what happens when you inline-block two elements:

The white space between the two inline block divs is expected. When you inline an element (or inline-block in this case), you are in affect instructing the browser to put all the elements on the same line side by side. By doing so, you are in affect treating your divs equivalent to the white-spaces on the line (space/tab etc) as they share the line space.

In your snippet, you have 4 space characters between the closing div tag (</div>) and the next opening <div> tag. Browser rendering engine shrinks multiple spaces into a single space and that single space takes up the extra character which is what you are observing in this case.

So, once you understand the above, you can easily solve this by adopting one of the many workarounds like:

<div id="a" class="fif">text1</div><!-- 
--><div id="b" class="fif">text2</div>

or 

<div id="a" class="fif">text1</div
><div id="b" class="fif">text2</div>

or

<div id="a" class="fif">text1</
div><div id="b" class="fif">text2</
div>

The last one is a invalid XML, but browsers do not barf at this.

Your fiddle is forked with the above workarounds here: http://jsfiddle.net/AshwinPrabhuB/otavbncr/1/



回答5:

I'm not sure I fully understand, but this might help: http://jsfiddle.net/UwZsm/3

.fif {display: inline-block; margin: 0 -4px 0 0;}


回答6:

Well

.pad {
    background-color: #eee;
    padding: 4px;
    overflow:hidden  /*  first */
}
.fif {
    display: inline-block;
    margin: 0;
    padding: 4px 8px;
    float:left  /* second part */
}

jsFiddled here



回答7:

I tested out an idea, and it worked for what you are talking about I believe.

<html>
    <head>
        <title>test</title>
        <style>
            .fif{
                padding:0px;
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="test" class="pad" contenteditable="true">
          <div id="a" class="fif">text1</div>
          <div id="b" class="fif">text2</div>
        </div>  
    </body>
</html>

Hope that helps!



回答8:

Ok I figure it out if you have access to the html code.

    <div id="test" class="pad" contenteditable="true">
        <table>
          <tr>
           <td>
            <div id="a" class="fif">text1</div>
           </td>
           <td>
            <div id="b" class="fif">text2</div>
           </td>
          </tr>
         </table>
    </div>



<style>
.pad {
    background-color: #eee;
    padding: 0px;
    overflow:hidden
}
.fif {
    display: inline-block;
    margin: 0;
    padding: 0;
}
table,td,tr{
padding:0;
}

#a {
    background-color: #ddd;
}
#b {
    background-color: #ccc;
}
</style>


回答9:

http://jsfiddle.net/hari_OM/4GfcJ/2/

Here it is without any space.

<div id="test" class="pad" contenteditable="true">
    <div id="a" class="fif">text1</div><div id="b" class="fif">text2</div>
</div>


标签： css css3 html contenteditable
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~