Question

HTML文件：

<div id="home">
<b><p class="split-para">python<br><a href="pyt_temp.html" class="float">temperature converter in terminal</a>  <br>
<a href="pyt_palindrom.html" class="float">palindrome checker</a> <br> 
<a href="pyt_tkinter.html" class="float">gui for the temp converter</a> <br> 
<a href="pyt_cd.html" class="float">gui for the palindrome checker</a> 

<span>html5/css3/js/jquery/django <br>
 <a href="ass_eportfolio.html" class="float">eportfolio</a>  <br>
<a href="ass_js.html" class="float">datavalidation with javascript</a>  <br> 
<a href="ass_cd.html" class="float">implementing a given class diagram</a>  <br> 
<a href="ass_canvas.html" class="float">html5 + canvas</a>  <br> 
<a href="ass_interaction.html" class="float">html5 interaction</a></span></p> 
 </b></span></p>

CSS文件：

.split-para      { display:block;margin:10px;}
.split-para span { display:block;float:right;width:50%;margin-left:10px;}

有人能解释为什么结果会这样吗？

http://jsfiddle.net/u7SMD/

我已经尝试将其修复一个小时左右。我只想在相同的行上 - 左边的python项目和彼此相邻的html5 / css3项目。

我可以使用其他任何代码来执行此操作，还是让任何人看到解决方案？

非常感谢

Answer 1

这是你想要的：http://jsfiddle.net/u7SMD/1/

我注意到的一些事情：

尽量不要将html与样式混合使用。让html成为骨架，让css做造型！
左线断线不正确。它是（在我的小提琴中）
习惯使用div，使用css解决问题要比做一份工作容易得多。
保持良好的结构。从现在开始，它不仅可以让你更容易阅读，也可以在几个月后阅读！
祝你顺利进入美丽的编码世界！

HTML

<div id="left" class="split-para">python <br/>
        <a href="pyt_temp.html" class="float">temperature converter in terminal</a><br />
        <a href="pyt_palindrom.html" class="float">palindrome checker</a> <br /> 
        <a href="pyt_tkinter.html" class="float">gui for the temp converter</a> <br /> 
        <a href="pyt_cd.html" class="float">gui for the palindrome checker</a> <br /></div>

<div id="right">html5/css3/js/jquery/django <br />
        <a href="ass_eportfolio.html" class="float">eportfolio</a>  <br />
        <a href="ass_js.html" class="float">datavalidation with javascript</a>  <br /> 
        <a href="ass_cd.html" class="float">implementing a given class diagram</a>  <br/> 
        <a href="ass_canvas.html" class="float">html5 + canvas</a>  <br/> 
        <a href="ass_interaction.html" class="float">html5 interaction</a>
</div>

CSS

#left { 
        float: left;        
        display:block;
        margin:10px;
}

#right { 
         display:block;
         float:right;
         width:50%;
         margin-left:10px;
}

Answer 2

输出：

Image of outpur

JSFiddle Link

HTML：

    <div class="right">
  html5/css3/js/jquery/django 
  <br>
  <a href="ass_eportfolio.html" class="float">
    eportfolio
  </a>

  <br>
  <a href="ass_js.html" class="float">
    datavalidation with javascript
  </a>

  <br>

  <a href="ass_cd.html" class="float">
    implementing a given class diagram
  </a>

  <br>

  <a href="ass_canvas.html" class="float">
    html5 + canvas
  </a>

  <br>

  <a href="ass_interaction.html" class="float">
    html5 interaction
  </a>
</div>

<div class="left">      
  python
  <br>
  <a href="pyt_temp.html" class="float">
    temperature converter in terminal
  </a>

  <br>

  <a href="pyt_palindrom.html" class="float">
    palindrome checker
  </a>

  <br>

  <a href="pyt_tkinter.html" class="float">
    gui for the temp converter
  </a>

  <br>

  <a href="pyt_cd.html" class="float">
    gui for the palindrome checker
  </a>
</div>

CSS：

.right{
    float:right;
    width:50%;
    margin-left:10px;
}

.left {
// no need for float:left in this context but u can add it
}

Answer 3

请参阅此Fiddle

<div id="home">
    <div class="left">
        <b><p class="split-para">python<br>
        <a href="pyt_temp.html" class="float">temperature converter in terminal</a>  <br>
        <a href="pyt_palindrom.html" class="float">palindrome checker</a> <br> 
        <a href="pyt_tkinter.html" class="float">gui for the temp converter</a> <br> 
        <a href="pyt_cd.html" class="float">gui for the palindrome checker</a>
        </p></b>
    </div>
    <div class="right">
        <b><p class="split-para">html5/css3/js/jquery/django <br>
        <a href="ass_eportfolio.html" class="float">eportfolio</a>  <br>
        <a href="ass_js.html" class="float">datavalidation with javascript</a>  <br> 
        <a href="ass_cd.html" class="float">implementing a given class diagram</a>  <br> 
        <a href="ass_canvas.html" class="float">html5 + canvas</a>  <br> 
        <a href="ass_interaction.html" class="float">html5 interaction</a>
        </p></b>
    </div>
</div>

css文件：

.split-para{ display:block;width:50%}
.left{ float:left;}
.right{float:right;}

将文字对齐到右边＆amp;剩下

3 个答案: