Question

我的HTML：

var width = 400;
var height = 300;
var aspect = width/height;
var near = 1;
var far = 1000;
var angle = 45;

var createRenderer = function(){
    var renderer =  new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    return renderer;
}
var camera;
var createCamera = function(){
    camera = new THREE.PerspectiveCamera(
        angle, aspect, near, far);    
    camera.position.set( 0, 0, 100 );
    camera.lookAt(new THREE.Vector3( 0, 0, 0 ));
    return camera;
}


var createScene = function(){
    var scene = new THREE.Scene();
    return scene;
}
var createControls = function(camera){

    var controls = new 
        THREE.OrbitControls(camera);

    controls.rotateSpeed = 0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;

    controls.noZoom = true;
    controls.noPan = false;





    return controls;
}
var createLight = function(){
    var light = new THREE.PointLight(0xFFFFFF);
    light.position.x=0;
    light.position.y=0;
    light.position.z=100;
    return light;
}


var scene = createScene();
var camera = createCamera();
var controls = createControls(camera);
var light = createLight();

var renderer = createRenderer();

scene.add(light);


scaledMap = new THREE.Mesh( 
                            new THREE.PlaneGeometry( 150, 150 ),
                            new THREE.MeshBasicMaterial( {
                                                    map: new THREE.ImageUtils.loadTexture( '../img/logo.png' ),
                                        color:0xFFFFFF,
                                        side: THREE.DoubleSide
                                } )
                        );
scene.add( scaledMap );

var raycaster = new THREE.Raycaster();
var cameraPosition = new THREE.Vector2();
cameraPosition.x = 0; 
cameraPosition.y = 0; 

console.log(cameraPosition)
var render = function(){
   renderer.render(scene,camera);


    raycaster.setFromCamera( cameraPosition, camera );


    var intersects = raycaster.intersectObjects( scene.children );

    if(intersects[0] != undefined){
        $("#output").html(intersects[0].point.x.toFixed(2)+" "+intersects[0].point.y.toFixed(2));
  }


    renderer.render( scene, camera );


}
controls.addEventListener('change',render);
var animate = function(){
    requestAnimationFrame(animate);    
    render();
    controls.update();
}

animate();

$("#container").append(renderer.domElement);

目前，项目符号点显示在列表项的左侧;

我可以让点在右边吗？

Answer 1

使用direction: rtl;使文字和列表项项目符号从右向左方向。

li {
  font-weight: bold;
  text-align: right;
  direction: rtl;
}

https://jsfiddle.net/tyew2s8f/

更多阅读

Answer 2

i）direction:rtl;应该这样做，因为您已将text-align:right添加到li，li 正确对齐。玩耍，你将能够使用它来满足你的需求

<强> DEMO

<强> CSS：

li{
            font-weight:bold;
            text-align:right;
            direction:rtl;}

ii）如果您希望在每个项目旁边添加“*”必填符号，就像您在网址中提到的那样。你可以这样做。

<强> DEMO

<强> CSS：

li {
    display:block;
    list-style:none;
}
li:after {
      content:"*";
}

iii）或者您可以设置list-style-type:none并为子弹设置背景图片，如下例所示： Background images for bullet

Answer 3

您可以使用throw "bad input";。 direction属性指定文本方向/书写方向。

提示：将此属性与unicode-bidi属性一起使用可设置或返回是否应覆盖文本以支持同一文档中的多种语言。

Answer 4

如果您希望子弹点位于右侧，但文本左对齐

li {
  display:block;
  list-style:none;
  width: 200px;
  position: relative;
}

li::after {
    content: "•";
    display: inline-block;
    position: absolute;
    right: 0;
}

<ul>
  <li>Consultation</li>
  <li>Pharmacist</li>
  <li>Registration No.</li>  
</ul>

Answer 5

这是你可以做的事情。

`<style>
li {
list-style-type:none;
}
</style>`

^那将摆脱子弹

然后手动添加•li标签内部

例如<li>Consultation •</li>

是否可以在右边有点带html的列表？

5 个答案: